css min-width и margin/padding с абсолютным позиционированием

Question

Я использую абсолютное позиционирование, чтобы иметь 100% height экрана. Я также хочу ограничить resizing моей страницы, поэтому добавляю min-width в свой заголовок и div div. Проблема, с которой я сталкиваюсь, заключается в том, что когда размер изменяется до границы минимальной ширины, правая сторона margin disappears. Любые предложения, как заставить его работать?

HTML:

<div id="header">Header</div> 
<div id="content">Content</div> 

CSS:

html, body{ 
    background: blue; 
    padding:0px; 
    margin:0px; 

} 

#header{ 
    height:30px; 
    background: yellow; 
    position: absolute; 
    top:20px; 
    right:20px; 
    left:20px; 
    min-width:500px; 
} 

#content{ 
    background:green; 
    position: absolute; 
    top:50px; 
    right:20px; 
    left:20px; 
    bottom:20px; 
    min-width:500px; 
} 

jsfiddle

Answer 1

Я нашел решение моей самостоятельно. Проблема в том, что если вы примените min-width к элементу, который имеет padding или margin, это дополнение или маржа обрушиваются при изменении размера окна. Таким образом, решение заключалось в том, чтобы обернуть этот элемент внутри корневого элемента, а установить минимальную ширину на корневой элемент.

P.S. Я также попробовал подход к размеру коробки, предложенный Сэмом, но эффект был почти таким же: край сжимается, но не исчезает. Применять min-width на внешний элемент также решает проблему.

Вот пример

updated fiddle

Answer 2

Вы можете использовать CSS box-sizing property для достижения этой цели в современных браузерах (IE8 +)