使垂直高度的所有可用高度

enter image description here 紅色和綠色的div對齊一個接一個。如何使紅色的div與綠色的div一樣高？使垂直高度的所有可用高度

2012-01-05 Ryan

您可以添加當前的HTML/CSS嗎？一個[jsFiddle演示]（http://jsfiddle.net/）也會有所幫助。 – thirtydot 2012-01-05 09:29:59

你需要支持IE7嗎？ – thirtydot 2012-01-05 09:30:19

你應該有一個包含這兩個元素是clearfixed

<div class="wrapper clearfix"> 
    <div class="red"></div> 
    <div class="green"></div> 
</div>

一個div

然後，您的相對位置添加到包裝材料：

.wrapper { 
    /* remember this is clearfixed */ 
    position: relative; 
}

你讓綠色容器浮動的權利：

.green { 
    float: right; 
    width: 50%; 
}

那麼你絕對定位的紅色，讓它知道它應該使用包裝的所有空間：

.red { 
    position: absolute; 
    left: 0; 
    width: 50%; 
    top: 0; 
    bottom: 0; 
}

注意，當綠色容器比左邊的一個大的這種情況下才有效。

來源

2012-01-05 09:35:20 Duopixel

這是有問題的 - 因爲要使高度相同，您需要在文檔和紅色和綠色div之間添加div，此div必須已定義高度，因此您可以將div-s的高度設置爲100％，例如。

<div style="height: [must be defined]"> 
    <div id="red" style="height: 100%; ..."> ... </div> 
    <div id="green" style="height: 100%; ..."> ... </div> 
</div> 
<div id="black" style="height: 100%; ..."> ... </div>

BUT - 這將中斷，當div的之一將是高於其他 - 通過使用溢出

PS固定。對於某些情況下，這是好事，這裏使用表格，因爲表格單元格始終高度相同

來源

2012-01-05 09:33:37 SergeS

您可以使用表格作爲包裝。第一個和最後一個tr是可選的。但是如果你需要第一個或最後一個tr，請設置一個高度。瀏覽器需要這個來計算中間tr的正確高度。

<!DOCTYPE HTML> 
<html> 
<head> 
    <title></title> 
</head> 
<style type="text/css"> 
    html, body {height:100%; padding:0; margin:0;} 
    #wrapper {height:100%;width:100%;border-collapse:collapse;} 
    #wrapper td {vertical-align:top;} 
    #wrapperFirst, #wrapperLast {height:1px;} 
</style> 
<body> 
    <table id="wrapper"> 
     <tr><td id="wrapperFirst" style="background-color: #ff44ff;">foo top</td></tr> 
     <tr><td style="background-color: #ffff44;">text</td></tr> 
     <tr><td id="wrapperLast" style="background-color: #44ffff;">foo bottom</td></tr> 
    </table> 

</body> 
</html>

來源

2013-06-12 08:41:55 Uwe

使垂直高度的所有可用高度

回答

相關問題