带边距或填充滚动条问题的100％高度划分

Question

在将50px填充（黑色）应用于.background样式时，我无法消除垂直滚动条。

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 ，而不是它的工作原理。

*{
 box-sizing:border-box;
 }