div column height

如何使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>

http://jsfiddle.net/WD94e/

在不使用表格的情况下，您要做的事情在 CSS 中并不完全可行。你能做的下一件最好的事情就是做一个"人造柱"。

http://jsfiddle.net/3wXv2/

更新了 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 的div.b 和 .c(就像"人造列"一样，它基本上欺骗人们认为"C"的背景实际上是在扩展，但事实并非如此。

您可以从这个优秀的资源中阅读有关人造列的信息：

http://www.alistapart.com/articles/fauxcolumns/

height：100%;"的问题是，这个声明不是说"拉伸到列的剩余高度"。

它说"让我的身高等于我父母身高的100%！

这意味着，它会查看父容器(在本例中为 .bc(并将其 height = 设置为该高度。如果你看一下你的CSS，它显示.bc的高度为100%，这做了同样的事情。它使它的高度= .wrap设置为500px。

所以......列".c"设置为500px，而不是"500px - 列中的任何其他内容"，因为CSS的规则不是这样工作的。

当然，如果您碰巧"div.c"中的内容高于剩余列高，这可能会中断。

我希望这有所帮助。

干杯！

请参阅此更新的小提琴：http://jsfiddle.net/WD94e/1/。

您只需要更改"bbb"和"ccc"列的高度，使它们加起来达到 100%的总和：

<div style="background-color:cyan;height:5%;">
    bbb
</div>
<div style="background-color:gray;height:95%;">
    ccc
</div>

相关内容

最新更新

热门标签：