-1

所以我使用Bootstrap 4作爲我的網格系統，並且我有兩列在對方下面。我的問題是，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; 
    } 
}

來源

2017-03-26 Simon

我不明白，它看起來很好。 https://jsfiddle.net/hkred6d7/你能指出究竟是什麼問題？ – Lucian

您的問題不能使用你提供的代碼被複制。

但是，您可以使用min-height: 100%而不是height，以確保在內容足夠長以滿足要求時，它會超過100％。

min-height屬性用於設置給定元素的最小高度。它可以防止高度屬性的使用值變得小於爲最小高度指定的值。最小高度值覆蓋最大高度和最大高度。

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

來源

2017-03-26 13:53:20

如果我的理解，好像你想要的「可變寬度的內容」，應使用：同事{}斷點-auto。

快速測試筆，並改變這似乎解決它。

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

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

編輯：實際上標題文本溢出就在身邊，當屏幕尺寸改變了一些奇怪的寬度改變這種解決的問題。

重疊在你的問題，我只能重新創建它，當我給px高度大小的關於部分。這不會出現在你的代碼中。

來源

2017-03-26 14:06:53 Salix

使容器的內容合適高度

HTML

CSS

回答

相關問題