用固定寬度標題填充在滾動列的底部

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中工作。