即使滚动它也会使div粘在底部

Question

我正在实现一个页脚，即使我滚动也应该粘在窗口的底部。页脚上方内容的滚动条应该在内容本身内（不扩展到页脚）。

有没有办法做到这一点？感谢。

Answer 1

为页脚元素设置CSS：

.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

Answer 2

.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
} 

工作得很好！但是，如果你真的想要粘性，你应该使用例如iScroll（http://iscrolljs.com）使用iScroll你只有一个区域可以滚动，页眉和页脚也不能滚动！

Answer 3

您有一个视口，您可以在其中绘制（布局）您的页面，并且您无法在其外部绘制。滚动条是窗口本身的控件/装饰，您无法覆盖它。

设置页脚和主要内容位置，并使用overflow: scroll滚动主要内容 - 这样滚动条就会附加到内容div而不是浏览器窗口。
页脚旁边没有滚动条，但右侧可能有预留空间。这超出了您的控制范围 - 这取决于浏览器供应商。

它看起来像这样（我使用ID代替Classes）：

#content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    overflow: scroll;
}
#footer {
    background: white;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
}

<div id="content">
This is the content area. It will have lots of vertical space so that it can scroll.<br>
<br>
a<br><br>
b<br><br>
c<br><br>
d<br><br>
e<br><br>
f<br><br>
g<br><br>
h<br><br>
i<br><br>
j<br><br>
k<br><br>
l<br><br>
m<br><br>
n<br><br>
o<br><br>
p<br><br>
</div>
<div id="footer">
This is the footer part and may have <em>the fine print</em> and/or navigation links; whatever you like.
</div>

...或者this fiddle展示它。