如何将 DIV 缩放到全宽？答案

【问题标题】：How do I scale a DIV to full width?如何将 DIV 缩放到全宽？
【发布时间】：2011-10-25 12:25:10
【问题描述】：

我想将 DIV 设置为页面宽度的 100%，而不是窗口宽度的 100%。

因此，如果我的内容比浏览器窗口宽，我希望 DIV 仍然缩放到整个宽度，而不是像 width: 100% 那样在页面中间结束。

用width: 200%; overflow: visible; 将它嵌套到一个DIV 中基本上是可行的，但有一个副作用是你可以滚动所有的200%。即使这样，如果内容超过窗口宽度的两倍，div 也会在半空中结束。

示例：http://jsfiddle.net/nm64V/（请注意，3000px宽的内容只是一个示例，在我的项目中我不知道内容会有多宽，什么时候会超过窗口宽度）

如何实现所描述的行为？

【问题讨论】：

您的 HTML 和 BODY 样式是否也将宽度设置为 100%？这个特定的 DIV 是否嵌套在另一个标签中（我的意思是 BODY 标签除外）？您可能忘记了 'display: ...' 和 'position: ...' 属性以使您的 DIV 正常工作。
它嵌套在一个包含margin: 0 的整体包装器DIV 中。此包装器上方的下一个元素是 BODY。

标签： html css width scaling

【解决方案1】：

我不相信你想做的事情是这样的。您可能需要给出一个更具体的示例来说明您想要实现的目标。

在那之前，我给出一个可能有效的猜测：给周围的元素（<body> 可能有效，否则添加一个）display: table-cell，因为表格单元格会拉伸以适应其内容。如果您需要支持不支持display: table-cell 的旧版浏览器，请尝试在内容周围添加一个单元格表格。

示例：http://jsfiddle.net/nm64V/2/

【讨论】：

【解决方案2】：

据我了解，您可以通过将所有内容包装在一个设置为内容大小的 div 中来解决此问题。使用您的示例：

<div style="margin: 0">
    <div style="width: 3000px;">
        <div style="width: 100%; border: 1px solid red;"></div>
        <div>... Your long content goes here ...</div>
    </div>
</div>

现在，无论您将容器 div 设置为什么宽度（例如 1500 像素），内部 div（带有红色边框）和您的内容都将是该宽度，即使它超出了浏览器窗口。

如果你不知道容器 div 的大小，去掉 'style="width: 3000px;"' 行，它仍然可以工作。

示例：http://jsfiddle.net/nm64V/1/

【讨论】：

【解决方案3】：

您可能应该提供一个示例，说明您正在尝试做什么。由于 DIV 是一个块元素，它应该始终占据所有可用的宽度，除非它是空的或浮动的。

你所说的“内容”是在那个 DIV 里面还是页面的其他地方？

【讨论】：

在我的问题中添加了一个示例。