Question

我正在使用Bootstrap 3来创建布局，我不确定这是否相关。 html / body元素设置为height：100％，我甚至将min-height：100％放在body上，并将body设置为相对位置。

         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>

正如我之前所说，这不是任何其他div，只是身体。这可能是什么问题？

Answer 1

您的样本中没有bottom:0;。这似乎是个问题。

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

以下是您的代码演示：（使用bootstrap 3 ）

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

绝对位于相对身体内部不起作用

1 个答案: