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;
}

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