Question

我有一个快速的CSS问题，我希望有人可以帮助我！

我有一个名为#ContentPanel的DIV，我希望它能够扩展，以便在需要时可以提供更多文本。目前，如果文本长度超过500px（在CSS中指定），它会从底部和下面div中的内容流出。如何将其设置为自动扩展并在向下推送所有div。

如果有人有任何想法，请告诉我

这是HTML

<div id="MainContent">
    <div id="MainImage"></div>
    <div id="ContentPanel">Text content goes here.</div>
</div>

...这里是CSS

#MainContent {
    position:relative;
    height:500px;
    width:800px;
    margin:0 auto;
    background-color: #000;
}

#MainImage {
    position:absolute;
    top:0;
    left:0;
    width:350px;
    height:500px;
    background-color:#000;
}

#ContentPanel {
    position:absolute;
    height:500px;
    top:0;
    left:350px;
    width:450px;
    background-color:#000;
}

提前致谢！

亲切的问候，

Decbrad

Answer 1

使用min-height代替height。

除了IE 6：它有一个错误，因此它会像height一样解释min-height。

Answer 2

如前所述，问题是你定义了一个固定的高度..所以浏览器坚持它......

您需要使用min-height属性使其更加灵活。然而，IE不支持它，但是由于它如何处理高度的另一个错误（如果超过定义的高度它扩展以满足内容）它可以解决..

完整的解决方案是

height:auto!important; /*this set the height to auto for those supporting it (not IE)*/
height:500px; /*for IE, all others override it by the previous rule*/
min-height:500px; /*for the ones that support it (all but IE)*/

一般来说，这是解决这些问题的方法..在你的情况下，我看到你使用绝对定位..如果你真的需要这个，而且它不只是试图解决你的问题，那么很遗憾元素无法调整其大小以满足绝对定位元素的需要..

Answer 3

尝试设置最小高度（min-height :)而不是特定的固定高度。

Answer 4

您需要使用min-height css属性

Answer 5

你所追求的属性是最小高度，而不是高度。

http://www.w3schools.com/CSS/pr_dim_min-height.asp

这意味着你的元素至少会那么高。如果内容保证，则高度将超过指定值。

Answer 6

作为第二种选择，您可能需要尝试overflow: scroll;或overflow-x和overflow-y，以便在内容不适合的情况下在div上显示滚动条

Answer 7

个人观点：为了解决IE6的最小高度问题，最好在你的目标中使用IE6特定的条件评论，而不是在你的CSS中加入黑客攻击。

如果符合标准的CSS对您很重要，尽管由于浏览器支持不稳定，这些日子变得越来越困难。

<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->

添加更多文本时，CSS DIV不会扩展

7 个答案: