页脚总是在最底部（随内容移动，但最小值在底部）

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/

Answer 3

给你，Example 给你：

HTML:

<div id="main">

  <h1>Sticky Footer</h1>
  <h2>with Fixed Footer Height</h2> 

</div>

<div id="bottomArea">
  I'm the Sticky Footer.
</div>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#main {
    min-height: 100%;
    margin:0 auto -142px auto; 
    background:#FCF;
}
#main:after {
  content: "";
  display: block;
}
#bottomArea, #main:after {
  /* .push must be the same height as footer */
    height: 142px; 
}
#bottomArea {
  background: orange;
}

页脚总是在最底部（随内容移动，但最小值在底部）

Footer always at very bottom (move with content, but min at bottom)

html

css

footer