html - 具有绝对定位的 css 最小宽度和边距/填充

Question

我使用绝对定位来获得屏幕的 100% 高度。我还想限制页面的 resizing，所以我在标题和内容 div 中添加了 min-width。我面临的问题是，一旦调整大小达到最小宽度边界，右侧 margin 就会消失。有什么建议可以让它发挥作用吗？

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

我自己找到了解决方案。问题是，如果您在具有 padding 或 margin 的元素上应用 min-width，则当您调整窗口大小时，该填充或边距会折叠.所以解决方案是将该元素包装在根元素内，并在根元素上设置最小宽度。

附言我还尝试了 Sam 建议的 box-sizing 方法，但效果几乎相同:边距缩小但不会全部消失。在外部元素上应用 min-width 也可以解决这个问题。

举个例子

updated fiddle