如何使 bbb + ccc 的列与 aaa、ddd 列的高度相同？
<html><body>
<div style="width:500px;height:500px;background-color:yellow">
<div style="float:left;height:100%;background-color:green;">
aaa
</div>
<div style="float:left;height:100%;background-color:#ff00ff">
<div style='background-color:cyan;height:25px;'>
bbb
</div>
<div style="background-color:gray;height:100%;">
ccc
</div>
</div>
ddd
</div>
</body></html>
最佳答案
如果不使用表格，您想要做的事情在 CSS 中并不完全可行。您可以做的下一个最好的事情是制作一个“人造专栏”。
更新了 HTML(删除了内联 CSS 并添加了简单的类名)
<div class="wrap d">
<div class="a">aaa</div>
<div class="bc">
<div class="b">bbb</div>
<div class="c">ccc</div>
</div>
ddd
</div>
CSS
.wrap{
width:500px;
height:500px;
background-color:yellow;
}
.a{
float:left;
height:100%;
background-color:green;
}
/* This is a "Faux Column" */
.bc{
float:left;
height:100%;
/*background-color:#ff00ff;*/
/* This is the faux column, make it the same as "DIV.c" */
background-color:gray;
}
.b{
background-color:cyan;
height:25px;
}
.c{
background-color:gray;
/*height:100%; /* Don't Do this. Need to "faux column" this */
}
这里的“技巧”是容器“列”(包含堆叠 div .b 和 .c 的 Div.bc)就像“人造列”一样，它基本上是一种欺骗人们认为背景“C”实际上是在延伸，但它不是。
您可以从这个优秀的资源中阅读有关 Faux Columns 的信息:
http://www.alistapart.com/articles/fauxcolumns/
“高度:100%；”的问题是这个声明不是说“拉伸(stretch)到列的剩余高度”。
它在说“让我的高度等于我 parent 高度的 100%!”。
这意味着，它查看父容器(在本例中为 .bc)并将其 height = 设置为该高度。如果您查看您的 CSS，它会显示 .bc 的高度为 100%，这做同样的事情。它使它的 height = .wrap 被设置为 500px。
所以...列“.c”设置为 500px，而不是“500px - 列中的任何其他内容”，因为 CSS 只是不能按照它的规则那样工作。
当然，如果您碰巧在“div.c”中的内容高于剩余列的高度，这可能会中断。
希望对您有所帮助。
干杯!
关于css - div列高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10356310/