3 列 html 模板 - 尽管两者都清晰且高度为 100%，但内容溢出答案

【问题标题】：3 column html template - content overflows though there is clear both and height is 100%3 列 html 模板 - 尽管两者都清晰且高度为 100%，但内容溢出
【发布时间】：2012-12-10 13:37:53
【问题描述】：

我在一个包装器中有 3 个 div：

<div id="wrapper">

<div id="leftbar">
Lorem ipsum dolar sit amet
</div><!--LEFTBAR-->

<div id="middle">
Lorem ipsum dolar sit amet
</div><!--middle-->

<div id="rightbar">
Lorem ipsum dolar sit amet
</div><!--RIGHTBAR-->

</div><!--wrapper-->

“leftbar”和“middle”都向左浮动，而“rightbar”向右浮动。 'wrapper' 设置了 height:100%; clear:both;。

但是，如果“中间”中有大量文本或内容，则会溢出“包装”div。我正在努力弄清楚为什么会发生这种情况。

我的 CSS 是：

#wrapper {
    width: 1000px;
    height: 100%;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
}

#leftbar {
    float:left;
    width: 150px;
    min-height: 450px;
    padding: 5px;
}

#middle {
    float:left;
    height: 100%;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}

#rightbar {
    float:right;
    width: 200px;
    min-height: 450px;
    padding: 5px;
}

感谢任何建议！

【问题讨论】：

标签： html css

【解决方案1】：

将overflow:auto 添加到#textcontent 并从#textcontent 和#maincontent 中删除height:100%

【讨论】：

【解决方案2】：

当您编辑您的问题时，我才知道它是如何溢出的，这是因为您使用的是height: 100%;，所以您的 div 不会超出视口，所以请改用 height: auto; 并同时使用 overflow: auto; #textcontent 而不是 clear: both; 就像 Musa 告诉你的那样......（用萤火虫检查）

【讨论】：

【解决方案3】：

这是带有一些小添加的 css 文件：

为您的条形图对齐文本
包装器中的宽度设置为 1000 像素，因此所有 px 在条形图之间平均分布。

#wrapper {
width: 1000px;
height: auto;
margin:auto;
padding: 30px;
margin-top: 40px;
background-color:#FFF;
color:#000;
border: 2px solid #828fc4;
clear:both;
overflow:auto;
}

#leftbar {
float:left;
width: 250px;
padding: 5px;
text-align:center;
}

#middle {
float:left;
width: 400px;
padding-left: 20px;
padding-right: 20px;
border-right: 1px dotted #2B308C;
border-left: 1px dotted #2B308C;
text-align: center;
}

#rightbar {
float:right;
width: 250px;
padding: 5px;
text-align:center;
}

只要我的两分钱

【讨论】：

【解决方案4】：

如果您只需要文本，请尝试使用 CSS3 列。

【讨论】：

【解决方案5】：

添加溢出属性并将高度更改为自动。

#wrapper {
    width: 1000px;
    height: auto;
    margin:auto;
    padding: 30px;
    margin-top: 40px;
    background-color:#FFF;
    color:#000;
    border: 2px solid #828fc4;
    clear:both;
    overflow:hidden;
}
#middle {
    float:left;
    width: 580px;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px dotted #2B308C;
    border-left: 1px dotted #2B308C;
}

【讨论】：