帶邊距或填充滾動條的100％高度分區問題

Question

我在向.background樣式應用50px填充（黑色）時刪除垂直滾動條時遇到問題。

html, body {height:100%; margin: 0; padding:0;} 

div.background 
{ 
    width: 500px; 
    height: 100%; 
    background-color: black; 
    padding: 50px; 
} 

div.transbox 
{ 
    width: 100%; 
    height: 100%; 
    background-color: #ffffff; 
    position: relative; 
    background-color: rgba(255,255,255,0.3); 
} 

div.transbox p 
{ 
    margin: 50px; 
    position: absolute; 
    bottom: 0; 
    color: white; 
} 

這是什麼樣子

http://jsfiddle.net/sm6LLgp4/2/

如果我刪除了頂部和底部填充（黑色），滾動條都走了，但我也失去了我的填充：

http://jsfiddle.net/sm6LLgp4/3/

如何在沒有垂直滾動條的情況下保持50px的填充？

Answer 1

插入框尺寸：邊框：框，比它的工作。

*{ 
box-sizing:border-box; 
}