我正在尝试使页脚正确，但遇到问题。我能够将页脚保持在页面底部，但很快意识到当窗口变小时，它最终会覆盖内容。我可以通过取消position:absolute来解决这个问题，但是如果我这样做，页脚将不再停留在页面底部。
我已经尝试了很多不同的方法来使其发挥作用，但这就是我目前正在考虑的，我希望有人可以在这里提供一些建议。
CSS code:
html, body {
margin: 0;
padding: 0;
height:100%;
}
#wrapper {
width:900px;
background-color:#FAFAFA;
min-height:100%;
margin:0 auto -45px;
height: auto !important;
height:100%;
}
#content{
margin-top:40px;
float: left;
padding-left:100px;
padding-bottom:30px;
overflow:auto;
}
#footer{
height:30px;
bottom:0;
background:#D2CFCF;
width:900px;
clear:both;
position:absolute;
}
我最近在页脚中尝试了 margin-top:-30px 和position:relative。通过上面的代码，页脚很好，位于底部，但当窗口变小时会覆盖内容。我能做些什么？
The HTML基本上如下
<body>
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
Use a position: fixed;页脚和底部的规则margin on the <body> tag.
http://jsfiddle.net/JGUYh/ http://jsfiddle.net/JGUYh/
BODY {
margin: 0 0 60px 0; /* keep regular content clear of the footer */
}
#footer {
position: fixed;
width: 100%;
height: 50px;
bottom: 0px;
background: #ccc;
overflow: hidden;
}
请注意，根据窗口大小，页脚有时会覆盖内容。但滚动会显示所有隐藏的内容。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
