1

我正在寻找解决我的 CSS 问题的方法。这是 Drupal 主题，所以内容会有不同的高度。我在底部固定了页脚，结构如下

<body>
  <div class="page-container">

    <div class="header">
    </div>

    <div class="content-container">

      <div class="content-insider">
       Different kind of content here
      </div>

    </div>
  </div>

  <div class="footer">
  </div>
</body>

我需要 content-container 和 content-insider 的高度至少是浏览器窗口的高度，同时也是内部内容的高度。需要将背景一直扩展到底部。我尝试了一些解决方案（也来自stackoverflow），但它们仅在内容短于浏览器高度时才有效。如果有更多内容，并且您向下滚动，则内容内幕会在到达浏览器底部之前切断。

4

1 回答 1

0

这是粘页脚的情况。你可以谷歌它或继续阅读。

  1. 在 .page-container 上设置 100% 的最小高度；
  2. 将其 box-sizing 属性更改为 border-box ，以便通过添加一些 padding 填充，其高度保持等于 100% vs 100% + padding。然后，完成后，添加一个等于 .footer 高度的填充底部；
  3. 通过将负边距顶部设置为等于其高度来向上拉页脚。

而已。这是一个小提琴，所以你可以看到它的实际效果：http: //jsfiddle.net/joplomacedo/MqzGt/

于 2012-07-09T01:22:11.747 回答