Question

我试图建立一个包含页眉，正文和页脚的网站。我希望页脚位于页面的最底部，但相对于内容移动它。这是我到目前为止所得到的

HTML：

<html>
   <header>
   </header>
   <body>
      <div id="header">
      </div>
      <div id="body">
      </div>
      <div id="footer">
      </div>
   </body>
</html>

的CSS：

* { 
    padding: 0; 
    margin: 0; 
}
html {
    overflow-y: scroll;
}
html, body { 
    height: 100%; 
    width: 100%; 
}
#header {
    height: 60px;
    position: fixed;
    top: 10px;
    left: 0; 
    right: 0; 
}
#body {
    min-height:74.3%;
    width:100%;

    padding-top   : 10%; 
    padding-bottom: 40px;
}

#footer {      
    height: 40px;
    position: relative;
    z-index: 1;
}

在我的分辨率（Retina）上一切正常，但是当测试较低分辨率时，如果<div id="body"></div>的内容不足以填满整个页面，则页脚会显示在页面底部上方。

有任何建议如何解决这个问题？

提前致谢！

Answer 1

您正在寻找的是粘性页脚，

最快的方法是将所有内容包装在页脚之外，并设置页脚高度大小的边距 - 所以在你的情况下你也应该包裹标题，这里是一般的例子：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -66px; 
}
//for clearfix
wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 66px; 
}
.site-footer {
  background: tomato;
}

还有其他方法， check this out

Answer 2

尝试http://ryanfait.com/sticky-footer/

<强> CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

另一个例子：https://css-tricks.com/snippets/css/sticky-footer/

页脚始终位于最底部（随内容移动，但最低位于底部）

2 个答案: