如何使我的 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>