Question

注意：我还在学习CSS＆amp; HTML，所以如果这个问题看起来像“noobish” - 那就是因为它。如果你能提供一个例子，或者是一篇适合我的问题的文章，那就太好了。

我创建了一个div（“background”），其中包含两个div（“left”和“right”）。

我希望“背景”div的高度扩大或缩小，基于“左”和“左”中的内容量。 “对”div。

#background {
width:100%;
height:15em;
background-color:#FFF;
box-shadow: 0 0 5px #888;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
clear:both;
}

我目前将“background”div的高度设置为15em，因为我不确定如何使其扩展或收缩。我已经尝试将其设置为“100％”和“自动”，但这些只会使“背景”div消失。

这是我的整个HTML＆amp; CSS代码：http://jsfiddle.net/jueRh/

Answer 1

在overflow: hidden;中设置#background并删除height:15em;声明。

演示：http://jsfiddle.net/sonic1980/jueRh/1/

Answer 2

如果您的容器div没有height值，它将成为其内容的可扩展容器。

如果您仍希望div具有一定的高度，但扩展内容溢出，则可以使用min-height。另请注意min-height仅支持等于或高于enlisted browsers in this link.

编辑但是，如果您要在容器中使用float ed div，则必须clear浮动才能正确渲染。您也可以使用display:inline-block作为float替代方案，然后您可以跳过clear，但that is also support limited.

如何创建流体高度分区？

2 个答案: