100% Высота Div с маркой или прокладкой для прокрутки Выпуск

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

Вставить размер коробки: border: box, чем он работает.

*{ 
box-sizing:border-box; 
}