带有边距或填充滚动条问题的 100% 高度 Div

Question

在将 50 像素内边距（黑色）应用于 .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/

如何在没有垂直滚动条的情况下保持 50 像素的填充？

Answer 1

插入 box-sizing:border:box，然后就可以了。

*{
 box-sizing:border-box;
 }