如何將DIV高度拉伸至父DIV？

我有點麻煩，讓我的div垂直拉伸。我已經閱讀了許多SO問題和答案，但我還沒有找到一個似乎對我有用的解決方案。如何將DIV高度拉伸至父DIV？

目前我正在使用兩個div，它們的寬度應該相等，以使用總的可用寬度。每個div的高度應適合內容，或者伸展到父高度，以較大者爲準。我發現，當我開始將內容放入這些區塊時，如果內容比另一區塊更多，則區塊高度不會長對齊。

我試過用clearfix和height = 100％玩，但我似乎無法得到這個工作。

Currently: 
+---------+ +---------+  +---------+ +---------+ 
| Text | | Text B | OR | Text A | | Text | 
| A | +---------+  +---------+ | B | 
+---------+        +---------+ 

Instead of: 
+---------+ +---------+  +---------+ +---------+ 
| Text | | Text B | OR | Text A | | Text | 
| A | |   |  |   | | B | 
+---------+ +---------+  +---------+ +---------+

這是我的HTML佈局：

<div class="grid-row"> 
    <div class="panel-quarter"> 
     <div class="panel-content bgnd-blue"> 
      <h2>First Block</h2> 
      <p>What if there is just a short amount of text here.</p> 
     </div> 
    </div> 
    <div class="panel-quarter"> 
     <div class="panel-content bgnd-green"> 
      <h2>Second Block</h2> 
      <p>And what if there is a really long section of text here that could go on for quite a few lines, especially more than the previous blocks text. This would make the heights somewhat mis-aligned it would seem.</p> 
     </div> 
    </div> 
</div>

這裏是我的風格：

.grid-row { 
    display: block; 
    height: auto; 
    width: 100%; 
    margin-bottom: 1em; 
} 

.panel-quarter { 
    float: left; 
    width: 50%; 
} 

.panel-quarter:first-of-type { 
    padding-right: 1em; 
} 

.panel-content { 
    padding: 1em; 
} 

.grid-row:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.panel-quarter, 
.panel-quarter:after, 
.panel-quarter:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

這裏是一個的jsfiddle：http://jsfiddle.net/zg4NB/

如果你一個CSS大師能告訴我我需要調整（希望）或完全重新設計（希望不是），這將是明智的iated。我敢肯定有一天我會把我的頭完全放在CSS的周圍，但希望那麼所有這些佈局的東西將被簡化=）

來源

2013-03-22 Luke Baulch

的小提琴是驚人的清晰（顏色，文本），Ascii藝術太...我希望我可以+2：D – 2013-03-22 08:25:09

如果你使用的CSS3比你爲什麼不使用flexBox佈局。這將輕鬆解決您的問題。

檢查的詳細信息，Mozilla的：Using CSS flexible boxes

對於IE，你可以去：Grid layout

來源

2013-03-22 06:43:45

它看起來像flexbox不是支持IE。理想情況下，我想使用所有主流瀏覽器都支持的內容。我確實有一個遊戲，並且這看起來很有希望，只要IE遵守。 – 2013-03-22 07:09:40

@LukeBaulch - 檢查IE的網格佈局：http：//msdn.microsoft.com/en-ca/library/ie/hh673533（v = vs.85）.aspx – 2013-03-22 07:25:02

可以實現與線JS的..

$('.panel-content').css('height', $('.grid-row').outerHeight());

http://jsfiddle.net/TAZhg/

來源

2013-03-22 06:58:48 Vassilis

如何將DIV高度拉伸至父DIV？

回答

相關問題