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

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

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

回答

相关问题