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

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)

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

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

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

答案 1 :(得分：2)

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

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

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

答案 2 :(得分：0)

如果设置了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>

相关问题

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

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>