Question

enter image description here 红色和绿色div是一个接一个排列的。如何使红色div与绿色div的高度相同？

Answer 1

你应该有一个包含两个元素的div，并且是clearfixed

<div class="wrapper clearfix">
  <div class="red"></div>
  <div class="green"></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;
}

请注意，此情况仅在绿色容器大于左侧容器时才有效。

Answer 2

这是有问题的 - 因为要使高度相同，你需要在文档和红色和绿色div之间添加div，这个div必须有高度定义，所以你可以将div-s内部的高度设置为100％，例如。 / p>

<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>

但是 - 当其中一个div高于其他div时，这将会中断 - 使用溢出来修复它

PS。在某些情况下，最好在这里使用表格，因为表格单元格总是具有相同的高度

Answer 3

您可以使用表作为包装器。第一个和最后一个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>

使div跨度垂直所有可用高度

3 个答案: