DIV 内容溢出到页脚，使页脚在页面上向上答案

【问题标题】：DIV content overflows into footer, makes footer go upward on pageDIV 内容溢出到页脚，使页脚在页面上向上
【发布时间】：2012-07-02 11:04:12
【问题描述】：

IM 试图让 div 内容不流过页脚，我希望内容 div 随着页面扩展而扩展，但是当文本越过页脚时，它会导致页脚在页面上向上跳转
html，正文 { 边距：0； /上、右、下、左/ 填充：0； /上、右、下、左/ 高度：100%； }

container {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    margin: 0 auto -100px;
    height: auto;
    min-height:100%;
}

content {
    position: relative; 
    padding-bottom:100px;
    overflow:auto;
    height:100%;
}

Header, #Footer {
    position: absolute;
    width:100%;
    background:url('bglines.png');
    background-size:15px 15px;
    color:white;
    padding:0 auto;
    text-align:center;
    color:#2FAACE;
}

Footer {
    margin-top: 100px;
    clear:both;
} 

menu {
    position:absolute;
    list-style-type:none;
    background: #808080;
    width:100%;
    padding: 85px 0px 0px 0px; /* Always on top */
}

ptop {
    text-transform:uppercase;
    font-family:impact;
    font-size:40pt;
    margin: 15px auto;
    color:#2FAACE;
}

pbottom {
    font-family:times;
    font-size:14pt;
    color:#2FAACE;
}

main {
position: absolute;
text-align:center;
left:50%;
width:90%;
margin-left: -45%;
top:150px;
color:white;
padding-bottom:100px;
}

p {
    font-size: 75px;
    color:white;
}

mainbg {
    background:#CCCCCC;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
    left:50px;
    width:95%;
    top:150px;
    position: absolute;
}

li {
    line-height:40px;
    margin:0px 0px 0px 0px;
    padding:0px 5px 5px 0px;
    text-align:center;
    float:left;
}

a, a:hover {
display:block;
font-family:Georgia;
width: 75px;
text-decoration:none;
font-size:30px;
}

a { color:white; }

a:Hover {
    background:#2FAACE;
    border-radius:9px 9px 9px 9px;
    color:#FFFFFF; /*TL, TR, BR, BL*/
}

【问题讨论】：

请创建一个 jsfiddle

标签： css html overflow footer

【解决方案1】：

请在footer 之前添加div 和clear:both。它实际上清除了所有将页脚固定在底部的浮动。

<div style="clear:both;"></div>

或者如果你已经在你的风格中定义了类（清晰），那么

<div class="clear"></div>

【讨论】：