设置宽度div，防止其他div跨越100％宽度

Question

我似乎遇到了100％宽度的麻烦。我有3个div，标题，内容和页脚相对定位。我在标题上设置了600px的宽度，在内容和页脚上设置了100％的宽度。但是，如果我在使用水平滚动条时调整浏览器的大小，则会切断100％宽度的div，并且不会完全匹配600px div ...我该如何解决这个问题？

CSS

#header {
    position: relative;
    width: 620px;
}

#content, #footer {
    position: relative;
    width: 100%;
}

HTML

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Answer 1

<div id = "container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>


#container {min-width:620px;}

参见示例：http://jsfiddle.net/calder12/xN2PV/3/

注意事项。 IE6不支持min-width。我怀疑这很重要，如果确实如此，你需要一个不同的解决方案。

Answer 2

为#content和#footer将宽度设置为“auto”。作为块元素的Div将在其直接父元素中自动消耗100％的可用宽度（如果设置则没有边距）。

因此，如果＃header＆＃footer包含在#header 或任何其他明确大小的元素 中，那么它们将永远不会超过指定的宽度。< / p>