如何使网页页脚高度为100％？

问题描述

| 我想将页脚的高度拉伸到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;
}

    

解决方法

        您必须确保主体没有增加一些空间：

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

同时确保页脚占用100％。     ,        确保其父级设置了固定宽度，例如：

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