Question

即时通讯试图让div内容不流过页脚，我希望内容div在页面展开时展开，但是当文本超过页脚时，会导致页脚在页面上向上跳转/> html，body { 余量：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*/
}

Answer 1

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

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

如果您已经定义了您的风格的类（清除），那么

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

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

1 个答案: