CSS的最小宽度和边距/填充与绝对定位

Question

I'm using absolute positioning to have 100% height of the screen. I also want to limit the resizing of my page so I add min-width in my header and content divs. The problem I'm facing is that once resizing reaches the min-width boundary, right side margin disappears . Any suggestions how to make it work?

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

您可以使用CSS box-sizing属性在现代浏览器（IE8 +）中完成此操作

Answer 2

I found a solution my self. The problem is that if you apply min-width on the element which has padding or margin , that padding or margin collapses when you resize the window. So the solution was to wrap that element inside root element and set min-width on the root element.

PS I also tried box-sizing approach suggested by Sam but effect was almost the same: margin shrinks but doesn't disappear all. Applying min-width on outer element solves the issue as well.

Here is an example

updated fiddle