我只是对页脚进行一些快速更改。
页脚需要粘性,我按照A List Apart方法描述的方法尝试让页脚保持在底部,但它似乎有点偏离。
html, body {
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
<div id="container">
<div id="content">...</div>
<div id="footer">...</div>
</div>
我只是对页脚进行一些快速更改。
页脚需要粘性,我按照A List Apart方法描述的方法尝试让页脚保持在底部,但它似乎有点偏离。
html, body {
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
<div id="container">
<div id="content">...</div>
<div id="footer">...</div>
</div>
我总是使用CSSStickyFooter 方法。
HTML,一个基本的骨架
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
CSS,这只是一个片段
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
我认为你应该添加到#wrapper clearfix,在这种情况下将 height: 100% 添加到#wrapper 和#container,你会看到页脚低于应该的值。现在你应该将顶部设置为页脚的负高度,它应该可以工作。Bo 我不知道它是否会涵盖包装器的内容。