IM试图让div内容不流过页脚,我希望内容div随着页面扩展而扩展,但是当文本越过页脚时,它会导致页脚在页面上向上跳转
html,正文{
margin :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*/
}
最佳答案
请在footer
之前添加一个带有clear:both
的div
。它实际上清除了所有 float ,将页脚固定在底部。
<div style="clear:both;"></div>
或者,如果您在样式中定义了类(清晰),则
<div class="clear"></div>
关于css - DIV 内容溢出到页脚,使页脚在页面上向上移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11286793/