Question

我正在使用绝对定位来获得屏幕的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 property在现代浏览器（IE8 +）

中完成此操作

Answer 2

我找到了解决方案。问题是，如果您对具有min-width或padding的元素应用margin，则在调整窗口大小时该填充或边距会折叠。因此，解决方案是将该元素包装在根元素中，然后在根元素上设置min-width。

P.S。我也尝试过Sam提出的盒子大小调整方法，但效果几乎相同：边缘缩小但并未消失。在外部元素上应用min-width也解决了这个问题。

这是一个例子

updated fiddle

css min-width和margin / padding with absolute positioning

2 个答案: