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>

页脚不会停留在页面底部

2 个答案: