如何使我的 web 页脚达到 100% 高度？

Question

我想将页脚的高度拉伸到 100%，以便将其父页脚div拉伸到页面的末尾。 我尝试了这个解决方案，但它对我不起作用。

如何将 div 拉伸到 100% 页面高度

每当我尝试将页脚的高度设置为 100% 时，它实际上会在页面底部显示相同大小的可用区域。 我正在使用 960 Grid 系统 CSS 框架。 如果在 CSS 中不可能，我们可以在 jquery 或 javascript 中执行此操作吗？ 检查我的页面演示 http://jsfiddle.net/23eED/1/或这是我的 HTML 代码：

<div class="footer">
   <div class="container_16">
      <div class="grid_16">
         <div class="footer-end-inner">

            <div class="grid_6 alpha copyright">
               <p>Copy right &copy; <b>Mossawir</b></p>
            </div>

            <div class="grid_10 omega footernav">
               <ul class="nav2">
               <li><a href="#">Home</a></li>
               <li><a href="#">Menu</a></li>
               <li><a href="#">Menu</a></li>
               <li><a href="#">Contact Me</a></li>
               </ul>
            </div>
         </div>
      </div>
   </div>

   <div class="clear"></div>
</div>

这是我的 CSS 代码：

.footer{
  height: 150px;
  width: 100%;
  background-color: #000615;
}

.footer-end-inner{
  background-color: #162e4c;
  height: 80px;
  width: 960px;
}

.footer a{
  color: #98999a;
}

.footer p{
  color: #98999a;
  padding-left:10px;
}

.copyright, .footernav{
 margin-top:30px;
}

.footer a:hover {
  color: #fff;
  text-decoration: none;
}

Answer 1

你必须确保身体没有增加一些空间：

body { margin: 0; padding: 0; }
.footer { margin: 0; }

还确保页脚占用 100%。

Answer 2

确保其父级设置了固定宽度，例如：

<div class="parent" width="300px">
   <div class="footer">...</div>
</div>