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

Question

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

问题：我想添加填充到主体的底部，所以如果你一直向下滚动，你会得到一些空白，而不是让所有东西都卡在底部边缘。在Chrome中完美添加padding-bottom: 50px至.body;然而，在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; 
} 

Answer 2

另一种解决办法是包装在另一个DIV您的内容，并添加填充（或保证金），以该分区，而不是滚动.body格：

<div class="body"> 
    <div class="body-content"> 
     <h1>Body</h1> 
     Where's the bottom padding? 
    </div> 
    </div> 

和CSS ...

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

Answer 3

还有一个解决办法，当你不想增加额外的DIV。

.body:after { 
    content: ""; 
    display: block; 
    height: 50px; 
    width: 100%; 
} 

在FF，Chrome，IE8-10中工作。