Позиция абсолютного внутреннего относительного тела не работает

Question

Я использую Bootstrap 3 для создания макета, я не уверен, что это актуально. Элемент html/body задан с высотой: 100%, я даже накладываю минимальную высоту: 100% на тело, а тело установлено на положение относительно.

  html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

      body { 
      min-height: 100%; 
      font-size: 16px; 
      background-color: rgb(232, 232, 232); 
      font-family: Calibri; 
      position: relative; 
     } 

Внутри тела, на уровне под ним, мой подвал, расположенный совсем с нижней: 0. Тем не менее, он будет не идти в нижней части страницы, независимо от того, насколько плохо я хочу его ,

  .footer { 
      color: white; 
      background: url(Images/images/footer_bg.gif) repeat-x; 
      padding-top: 10px; 
      padding-bottom: 9px; 
      padding-left: 30%; 
     } 

     .footerContainer { 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      margin-top: 60px; 
      position: absolute; 
      right: 0; 
      left: 0; 
     } 

Колонтитул является прямым потомком тела, то есть, это не скрывается внутри что-нибудь еще на всех. Вот разметка сноске:

<div class="container footerContainer"> 
<div class="row footer"> 
    <div class="col-md-12"><p>Content</p></div> 
</div> 

Как я уже говорил ранее, это не в каких-либо других дивы, только тело. В чем проблема?

Answer 1

В вашем образце нет bottom:0;. Кажется, это проблема.

.footerContainer { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    margin-top: 60px; 
    position: absolute; 
    border:1px solid; 
    bottom:0; 
} 

Вот демо с кодом: (с помощью самозагрузки 3)

http://jsfiddle.net/n6ypb/3/