css - 在带有固定宽度标题的滚动列底部填充

Question

所以我有一个包含专栏的网页。该列在顶部有一个固定的标题和一个较大的滚动正文部分，下面的 HTML/CSS 可以很好地实现这一点。

问题:我想在正文的底部添加填充，所以如果你一直向下滚动，你会得到一些空白，而不是让所有东西都挤到底部边缘。添加 padding-bottom: 50px 到 .body 在 Chrome 中完美运行；然而，在 Firefox 中，似乎使用 bottom 属性意味着 padding-bottom 被忽略。如果你放下 bottom，填充出现，但滚动条消失。

test.html

<link type="text/css" rel="stylesheet" media="all" href="/test.css">
<div class="column">
  <div class="header">
    Fixed header
  </div>
  <div class="body">
    <h1>Body</h1>
    Where's the bottom padding?
  </div>
</div>

test.css

.column {
  position: absolute;
  height: 100px;
  width: 100%;
  background-color: green;
}

.header {
  position: absolute;
  height: 30px;
  background-color: red;
}

.body {
  position: absolute;
  top: 30px;
  bottom: 0;
  overflow-y: auto;
  background-color: blue;
  padding-bottom: 50px;  /* Broken in Firefox */
}

上面的 JSFiddle:http://jsfiddle.net/jpatokal/PBwVa/

有解决办法吗？我想出的一个解决方法是使用一串 :last-child 选择器将填充添加到 .body 中的最后一个元素，但是，eww。

Answer 1

在 div.body 中添加一个带有边距底部的内部 div 似乎在您的 jsfiddle 中有效。

<link type="text/css" rel="stylesheet" media="all" href="/test.css">
<div class="column">
  <div class="header">
    Fixed header
  </div>
  <div class="body">
    <div class="inner">
      <h1>Body</h1>
        Where's the bottom padding?
    </div> 
  </div>
</div>

和(额外的)CSS:

.body .inner {
  margin-bottom: 30px;
}