Question

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

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

将width: 200%; overflow: visible;嵌入到DIV中基本上可以正常工作，但副作用是可以滚动所有200％。即使这样，如果内容超过窗口宽度的两倍，div将在半空中结束。

示例：http://jsfiddle.net/nm64V/（请注意，3000px宽的内容只是一个示例，在我的项目中，我不知道内容的宽度以及何时超出窗口宽度）

如何实现描述行为？

Answer 1

据我所知，您可以通过将所有内容包装在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设置为（例如，1500px），内部div（带有红色边框）和内容都将是该宽度，即使它超出浏览器窗口。

如果您不知道容器div的大小，请取出'style =“width：3000px;”'行，它仍然有用。

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

Answer 2

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

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

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

Answer 3

你应该提供一个你正在努力做的事情的例子。由于DIV是一个块元素，它应该始终占用所有宽度，除非它是空的或浮动的。

你所说的“内容”是说DIV还是页面中的其他地方？

如何将DIV缩放到全宽？

3 个答案: