-1

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

4

2 回答 2

1

如果不使用表格，您想要做的事情在 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 .b 和 .c 的 Div.bc）的行为类似于“人造列”，它基本上有点欺骗人们认为“C”的背景实际上正在扩展，但事实并非如此。

您可以从这个优秀的资源中了解 Faux Columns：

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

“身高：100%；”的问题 是这个声明不是说“拉伸到列的剩余高度”。

它的意思是“让我的身高等于我父母身高的 100%！”。

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

所以...列“.c”设置为 500px，而不是“500px - 列中的任何其他内容”，因为 CSS 不能按照它的规则那样工作。

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

我希望这会有所帮助。

干杯!

于 2012-04-27T19:14:38.290 回答
0

请参阅此更新的小提琴：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>
于 2012-04-27T19:11:48.507 回答