Как я могу сделать нижний колонтитул своей веб-страницы на 100% высоты?

Question

Я хочу увеличить высоту нижнего колонтитула до 100%, чтобы он растянул родительский нижний колонтитул div до конца страницы.Я попробовал это решение, но оно не сработало для меня.

Как мне увеличить div до 100% высоты страницы

Всякий раз, когда я пытался установить высотумой нижний колонтитул до 100%, он фактически показывает свободную область того же размера в нижней части страницы.Я использую 960 Grid system CSS Framework.если это невозможно в 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

убедитесь, что его родитель установил фиксированную ширину, например:

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

Answer 2

Вы должны убедиться, что тело не добавляет места:

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

Также гарантирует, что нижний колонтитул занимает 100%.