试图实现“粘性”页脚,但它没有按计划运行 . 它抛出它在底部,并在第一次滚动它按预期工作(除了它显示内部滚动条) . 当向上滚动时,粘贴页脚不会立即消失,它需要几个卷轴然后它似乎回到“底部” . 所以我的问题是我如何始终将页脚保持在底部并消除内部滚动条 . 我想知道我的绝对定位是否对主要内容有问题 . 这个div的高度可以扩展 .
这是代码:
<div id="page-wrap">
<div id="main-content>
<div id="main-content-inner></div>
</div>
<div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>
#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {
text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;
}
.footerpush
{
height:20px;
}
如果我从页面换行中删除溢出自动,页脚实际上移动到我的换页div的底部 . 所以看来,由于我的绝对主要内容 - 内在是绝对的,它正在我的包装外扩展?如果我在页面换行的高度上设置一个固定值,页脚将按原样移动到底部 . 所以这是真正的问题,即使内容可扩展,如何将页脚保持在页面底部?
进一步的研究表明,当我在页面换行中设置溢出隐藏时,我的绝对内容“主要内容 - 内部”被切断 . 如何将页面包装的高度扩展到main-content-inner的高度,无论它是什么?
3 回答
当我回答here时,您可以使用http://www.cssstickyfooter.com/:
试试这个 :
像这样重写你的
HTML
代码:并重写您的
CSS
文件样式属性:对我来说,这个网站是如何使页脚粘贴到网页末尾的最好例子 .
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/