CSS/Bootstrap：如何在cols full-height範圍內拉伸容器？

我正在使用簡單的Bootstrap-Grid：一行，兩個col-md-6 - 列。在每一列中，我都有一個容器class="box"，它應該使用height of 100%。CSS/Bootstrap：如何在cols full-height範圍內拉伸容器？

我嘗試了不同的方式，例如模擬一個表和列表，但選擇了Bootstrap推薦的.row-eq-height-類。

什麼是迫使box在col-md-6伸展到全高的常用方法？

HTML：

<div class="row row-eq-height"> 
    <div class="col-md-6"> 
     <div class="box" style="background: red"> 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.    
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="box" style="background: green"> 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
     </div> 
    </div> 
</div>

CSS：

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 

.col-md-6 { 
    background: yellow; /* to show the left space */ 
} 

.box { 
    height: 100%; 
}

直播：

http://jsfiddle.net/cmbe4h1h/

編輯：我想避免與另外的容器包裝的HTML（就像許多position: relative/absolute-教程）。

在此先感謝！

來源

2015-09-24 Mr. B.

@ManojKumar在該示例中（小提琴）紅色容器比綠色容器更高。也許你需要減少瀏覽器的寬度，才能看到問題。 –

你的意思是內容是更高的權利？ –

我沒有找到我的情況正確的CSS的解決方案，並切換到

JS（jQuery的）：

$('.sameHeightWrapper').each(function() { 
    var highestContainer = 0; 
    $('.sameHeightContainer', this).each(function() { 
     if($(this).height() > highestContainer) { 
      highestContainer = $(this).height(); 
     } 
    }); 
    $('.sameHeightContainer', this).height(highestContainer); 
});

HTML：

<div class="sameHeightWrapper"> 
    <div class="sameHeightContainer c1"> 
     Container 1<br/> 
     ... 
    </div> 
    <div class="sameHeightContainer c2"> 
     Container 2<br/> 
     ... 
    </div> 
    <div class="sameHeightContainer c3"> 
     Container 3<br/> 
     Container 3<br/> 
     ... 
    </div> 
</div>

試試看：jsfiddle.net

來源

2015-10-03 10:00:56

CSS solution。刪除了col-md-6類中的填充。也將您的bg內聯樣式移至外部容器，而不是box類。

CSS/Bootstrap：如何在cols full-height範圍內拉伸容器？

回答

相關問題