添加更多文本时CSS DIV不扩展答案

【问题标题】：CSS DIV not expanding when more text is added添加更多文本时CSS DIV不扩展
【发布时间】：2011-02-06 12:14:16
【问题描述】：

我有一个简单的 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;
}

提前致谢！

亲切的问候，

德布拉德

【问题讨论】：

对于 html/css 问题，请在 doctype.com 中发布，谢谢！

标签： html css height

【解决方案1】：

使用min-height 代替height。

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

【讨论】：

【解决方案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)*/

一般来说，这是解决此类问题的方法.. 在您的情况下，我看到您使用绝对定位.. 如果您真的需要这个，而且这不仅仅是解决您的问题的尝试，那么不幸的是 元素无法调整其大小以适应绝对定位的元素..

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

这意味着您的元素将至少有那么高。如果内容允许，高度将超过指定值。

【讨论】：

感谢一百万大家的帮助。非常感谢！

【解决方案5】：

作为第二种选择，您可能想尝试overflow: scroll; 或overflow-x 和overflow-y 在div 上显示滚动条，以防内容不合适。

【讨论】：

【解决方案6】：

个人意见：要解决 IE6 的最小高度问题，在定位它时使用特定于 IE6 的条件注释确实比在 CSS 中添加 hack 更好。

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

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

【讨论】：

【解决方案7】：

你需要使用min-heightcss属性

【讨论】：