Question

请考虑以下事项：

+----------------------------------------+
| Div A                                  |
|                                        |
|  +----------+   +-------------------+  |
|  | Div B    |   | Div C             |  |
|  |          |   |                   |  |
|  +----------+   |                   |  |
|                 |                   |  |
?                 ?                   ?  ?
|                 +-------------------+  |
+----------------------------------------+

Div A包含B和C.

Div B只会持有一行内容。

Div C包含可变项目计数列表，因此高度变化很大。

Div B和C设置了宽度。

Div C的高度驱动Div A的高度。

如何使Div B垂直扩展以匹配Div C的未知高度？

出于各种不值得进入的原因，表格在这种情况下不起作用。

3 个答案:

答案 0 :(得分：4)

答案 1 :(得分：2)

答案 2 :(得分：0)

Answer 1

我前一段时间遇到过这个问题，我发现了这个：

http://abcoder.com/css/css-equal-height-columns/

有使用jQuery或纯CSS的解决方案。它对我有用，我希望它是你正在寻找的。干杯！

Answer 2

有很多方法可以做这样的事情，它被称为“Faux Column s”。

在sitepoint上有一种方法，有a few more ways，并且有一种方法可以使用Nettuts描述的CSS3渐变

BTW，所有这些方法都只使用CSS，没有JavaScript

Answer 3

如果设置了Div A的高度，则可以将Div B的高度设置为100％

#divA{height:700px;}
#divB{height:100%;}

或者如果您正在尝试制作2列网页布局，则可以在身体上进行操作

body{height:100%;}
#divA{height:auto;}
#divB{min-height:100%;}

这是一个Javascript解决方案

<script type="text/javascript">
     var h = document.getElementById("divA").offsetHeight;
     document.getElementById("divB").style.height = h + "px";
</script>

当该空间是动态的时，使浮动div填充垂直空间

3 个答案: