css - 页脚不会粘在底部

Question

我尝试按照教程找到here 让我的页脚粘在浏览器窗口的底部。我已经多次检查了教程，看来我的结构正确。然而我的页脚仍然悬停在窗口上方大约 30 像素处。被困在这个问题上几天了，我没有任何想法，所以任何帮助都会很棒:)

<div class = "wrapper">
  <div id='cssmenu'>
  </div>


  <div id="header">
    <h1>My header</h1>
  </div>
  <div class="content">Some content
  </div>
  <div class="push">
  </div>
</div><!-- end wrapper -->


<div class="footer">Footer with images
</div>



* {
margin: 0;
}

html, body {
height: 100%;
}

body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
background-color: #FCFDFF;
font-size: 18px;
}

.content
{
  padding: 0% 0% 0% 20%;
  width: 65%;
  line-height:1.7em;
  background-color: #FCFDFF;

}


.footer, .push {
height: 4em;
clear: both;
}

.footer {
  background-color: #000;
}

.footerImages {

padding: 5px 5px 5px 1px;
    float: right;
}

Answer 1

为什么不直接做

.footer {
    position: fixed;
    bottom: 0;
}

这将为您提供一个粘在窗口底部的页脚，这就是您根据问题所想要的。