页脚不会停留在页面底部

Question

我的页脚不会停留在页面底部。 现在当我使用position: fixed; 或position: absolute; ，它表示在浏览器底部而不是页面底部。 因此，我希望它位于网页的底部，但也要位于内容的下方。

我尝试增加height: 100%; 到我的包装器（我的页脚在我的包装器外面），但是没有用。 我也尝试过添加粘性页脚，但是它没有用，但是我也将该部分留在了jsfiddle中。

这是我的jsfiddle： http : //jsfiddle.net/PfVFd/

现在，它似乎可以在小屏幕上工作（例如jsfiddle上的结果窗口），但是在1080分辨率下，它不起作用，因此这也是我的网站：http：http: //erraticfox.com/about.html

Answer 1

您应该阅读有关粘页脚的Ryan文档，所有内容都在： http : //ryanfait.com/resources/footer-stick-to-bottom-of-page/

要完成我以前的回答：

http://jsfiddle.net/PfVFd/1/

你应该有位置：固定

footer {
line-height: 100px;
position: fixed;
background: rgba(28, 32, 36, 1);
bottom:0px;
width: 100%;
margin-left: 0;
margin-right: 0;
height: 100px;
text-align: center; }

Answer 2

使位置：绝对和底部：0px

 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; } body { position: relative; margin: 0; padding-bottom: 4rem; min-height: 100%; font-family: "Helvetica Neue", Arial, sans-serif; } footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } 

 <footer>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</footer>