设置宽度 div 防止其他 div 跨越 100% 宽度答案

【问题标题】：Set width div preventing other divs to span 100% width设置宽度 div 防止其他 div 跨越 100% 宽度
【发布时间】：2023-03-09 04:19:01
【问题描述】：

我似乎在使用 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>

【问题讨论】：

标签： html css

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

【讨论】：

我不希望它们都最大到 620px，当浏览器大于 620px 时，我希望内容和页脚伸展。目前我调整大小并且当浏览器小于 620px 时，由于某种原因，浏览器会切断 100% 宽度的 div。
我在一分钟前编辑了答案，当时我意识到这就是你所追求的。它们被切断的原因是它们是可见窗口的 100%，因此它们将是窗口的大小，而标题将保持 620 像素
+1 - width: 100% 不是必需的，因为它是一个块元素。
min-width 不是向后兼容的属性，所以这个例子在一些旧的浏览器（肯定是 IE6 和可能的 IE7）中不起作用。不幸的是，在没有 javascript 的浏览器中，您无法真正获得所需的行为。然而，这些浏览器的市场份额正在缩小，因此忽略它们并非没有道理。
min-width 受 IE7 支持，没有人会再支持 IE6，除非他们绝对必须这样做，例如在公司机器仍然运行该浏览器并且它用于 Intranet 而不是比网络消费。话虽这么说，如果 OP 的目标市场是中国，他可能需要另一个解决方案：ie6countdown.com 世界其他地方从 8 年前的 10 年历史浏览器继续前进，哈哈

【解决方案2】：

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

因此，如果#content 和#footer 包含在#header 或任何其他明确调整大小的元素 中，则它们的宽度永远不会超过指定的宽度。

【讨论】：

页眉中包含内容和页脚的可能性有多大？
你会感到惊讶。我处理过很多人的 HTML，但它可能会变得很复杂。无论如何，我只是在说明一个观点。
没错，但是提出一个包含不良做法的观点有点违背 SO 一开始的观点。仅仅因为答案有效并不意味着它是正确的或应该以这种方式实施。为 OP 提供正确的做事方式是我们应该努力的方向。您的回答与我的回答确实没有什么不同，除了我的回答显示了应该如何通过以语义方式添加父元素来实现。
您的示例还强化了“width:100%”是 A) 必要和 B) 安全的概念，两者都不是，但是可以忽略您包含的不良做法，对吗？
我修复了代码来解决这个问题，我只是忘了更新小提琴。不确定您认为什么是“不安全的”。我不是要开始争论，也没有记下你的答案，老实说，我可能应该这样做。添加 100% 宽度与将整个网页封装在页眉中的想法有点极端。你的回答不是很好，继续前进吧。