Question

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

How can I stretch a div to 100% page height

每当我尝试将页脚高度设置为100％时，它实际上会在页面底部显示相同大小的空闲区域。我正在使用960网格系统CSS框架。如果它在CSS中不可能，我们可以在jquery或javascript中执行此操作吗？查看我的页面DEMO 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>

如何使我的网页页脚高度达到100％？

2 个答案: