コンテナをコンテンツの正しい高さにします

Question

私はグリッドシステムにブートストラップ4を使用しています。お互いに2列下にあります。私の問題は、height: 100%の場合、コンテナはコンテンツと共に成長しないということです。 overflow: autoを使用すると、列の内容が重複しないように動作しますが、スクロールバーが表示されます。コンテンツに応じてコンテナの高さを変更することをお勧めします。

HTML

<div class="py-5 container-fluid about"> 
    <div class="container-fluid about-wrapper-size"> 
    <div class="row w-100 h-100 m-0 p-0"> 
     <div class="align-self-center col-md-4"><img src="http://kingofwallpapers.com/square/square-009.jpg" class="rounded-circle d-block img-fluid mx-auto about-photo"></div> 
     <div class="col-md-8 align-self-center"> 
      <div class="row"> 
       <div class="col-md-12 about-para-wrapper"> 
       <h1 class="about-heading">Heading</h1> 
       <hr /> 
       <p class="about-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a odio tristique, tempus est quis, tempus mi. Etiam malesuada enim eget sapien faucibus, eu dictum nunc porta. In sem arcu, lacinia at justo quis, faucibus maximus enim. Donec 
        suscipit nulla arcu, vitae pulvinar enim blandit quis. Donec at neque id velit pharetra mattis. In eu facilisis sem, a rutrum tortor. Suspendisse potenti. Praesent in bibendum velit. Nam laoreet, metus ac bibendum feugiat, orci nunc fermentum 
        lorem, nec mollis nulla dui a nisl. Sed cursus ullamcorper malesuada. Suspendisse finibus eros nec viverra mattis. Curabitur venenatis, nisi et mollis tempor, erat magna mollis mi, in rhoncus neque magna a tellus. </p> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.vp-divider { 
    background-color:#FFA366 !important; 
    border:none; 
    margin:0; 
    height:1vh; 
} 

.about { 
    height:100%; 
    background-image: url("../images/tile.png"); 
    background-position: center center; 
    background-repeat: repeat; 
} 

.about-photo { 
    border: 4px solid #fff; 
    -webkit-box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.75); 
    box-shadow: 0px 0px 17px 1px rgba(0,0,0,0.75); 
} 

.about-heading { 
    font-family: 'Josefin Slab', serif; 
    font-size: 6em; 
} 

.about-lead { 
    font-family:'Roboto'; 
    font-size:2em; 
    font-weight:300; 
} 

.about-para-wrapper { 
    padding: 20 20 20 20; 
    background-color:#EFDFCB; 
    border:3px solid #fff; 
    margin-top: 20; 
    margin-bottom: 20; 
    -webkit-box-shadow: 0px 0px 9px 1px rgba(135,135,135,1); 
    -moz-box-shadow: 0px 0px 9px 1px rgba(135,135,135,1); 
    box-shadow: 0px 0px 9px 1px rgba(135,135,135,1); 
} 

.about-wrapper-size { 
    width:100%; 
} 

@media (min-width: 1661px) { 
    .about-wrapper-size { 
     width: 75%; 
    } 

    .about-para-wrapper { 
     margin-left: 20; 
    } 
} 

Answer 1

あなたの問題は、あなたが提供されたコードを使用して複製することはできません。

heightの代わりにmin-height: 100%を使用して、内容が十分に長い場合は100％を超えないようにすることができます。

min-heightプロパティは、特定の要素の最小高さを設定するために使用されます。 heightプロパティの使用値がmin-heightに指定された値より小さくならないようにします。 min-heightの値は、max-heightとheightの両方を上書きします。

https://developer.mozilla.org/en/docs/Web/CSS/min-height

Answer 2

私は理解している場合は、 '可変幅コンテンツ' をしたいと使用する必要がありますように、それはそうです：col- {}ブレークポイント-auto。

すぐにペンでテストし、これを修正したように見えました。

<div class="col-md-auto about-para-wrapper"> 

https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

編集：画面サイズが変更されたときに実際にこれが側に溢れ見出しのテキストといくつかの奇妙な幅の変更の問題を解決しました。

問題が重複している場合は、aboutセクションの高さをpxで指定したときにしか再作成できません。あなたのコードには表示されません。