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

Question

所以我有一个带有专栏的网页.该列顶部有一个固定的标题,还有一个大的滚动主体部分,下面的HTML/CSS可以正常工作.

问题:我想在主体的底部添加填充,所以如果你一直向下滚动,你会得到一些空白,而不是让所有东西都堵塞到底部边缘.添加padding-bottom: 50px到.bodyChrome中完美运行; 但是,在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内部添加一个带有margin-bottom的内部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;
}