1

我似乎在使用 100% 宽度时遇到了一些问题。我有 3 个相对定位的 div、页眉、内容和页脚。我在页眉上设置了 600 像素的宽度，在内容和页脚上设置了 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>
4

2 回答 2

3 
<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 不支持最小宽度。我怀疑这很重要，如果确实如此，您将需要不同的解决方案。

于 2013-01-03T15:11:33.727 回答
1

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

因此，如果 #content 和 #footer 包含在 #header或任何其他显式大小的元素中，那么它们将永远不会比指定的宽度更宽。

于 2013-01-03T15:12:23.373 回答