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

Question

我使用绝对定位来获得100% height的屏幕100% height 。 我还想限制页面的resizing ，因此我在标题和内容div中添加了min-width 。 我面临的问题是，一旦调整大小达到最小宽度边界，右侧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

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

Answer 2

我找到了解决方案。 问题是，如果对具有padding或margin的元素应用min-width ，则在调整窗口大小时该padding或margin会折叠。 因此，解决方案是将该元素包装在根元素内，并在根元素上设置最小宽度。

PS我也尝试了Sam提出的盒大小调整方法，但效果几乎相同：边际收缩但并没有消失。 在外部元素上应用最小宽度也可以解决此问题。

这是一个例子

更新的小提琴