如何将 DIV 缩放至全宽？
我想将 DIV 设置为页面宽度的 100%，而不是窗口宽度的 100%。
因此，如果我的内容比浏览器窗口宽，我希望 DIV 仍然缩放到完整宽度，而不是像 width: 100% 那样在页面中间结束。
将其嵌套到宽度为 200% 的 DIV 中； Overflow:visible; 基本上可以工作，但有一个副作用，就是你可以滚动所有 200%。即使这样，如果内容超过窗口宽度的两倍，div 也会在半空中结束。
示例： http://jsfiddle.net/nm64V/ （请注意，3000px 宽的内容只是一个示例，在我的项目中我不知道内容有多宽以及何时会超过窗口宽度）
我如何实现所描述的行为？
I'd like to set a DIV to 100% of the page width rather than 100% of the window width.
So, if my content is wider than the browser window, I want the DIV to still scale to the full width rather than ending in the middle of the page as it does with width: 100%.
Nesting it into a DIV with width: 200%; overflow: visible; basically works, but has the side effect that you can scroll along all the 200%. And even then, if the content exceeds double the window width, the div will end in mid-air.
Example: http://jsfiddle.net/nm64V/ (please note that the 3000px wide content is just an example, in my project I don't know how wide the content will be and when it will exceed the window width)
How do I achieve the descripted behavior?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我不相信你想做的事是可能的。您可能需要提供一个更具体的示例来说明您想要实现的目标。
在那之前，我给出一个可能有效的猜测：给出周围的元素（
可能有效，否则添加一个）display: table-cell，因为表格单元格会拉伸以适应他们的内容。如果您需要支持不支持display: table-cell的旧版浏览器，请尝试在内容周围添加单个单元格表格。示例： http://jsfiddle.net/nm64V/2/
I don't believe what you want to do is possible like that. You'll probably need to give a more concrete example of what you want to achieve.
Until then I give one guess that may work: Give the surrounding element (
<body>may work, otherwise add one)display: table-cell, since table cells stretch to fit their contents. If you need to support older browsers that don't supportdisplay: table-cell, try adding a single celled table around the contents instead.Example: http://jsfiddle.net/nm64V/2/
据我了解，您可以通过将所有内容包装在一个 div 中来解决这个问题，该 div 设置为内容的大小。使用您的示例：
现在，无论您将容器 div 设置为什么宽度（例如 1500px），内部 div（带有红色边框）和您的内容都将是该宽度，即使它超出了浏览器窗口。
如果您不知道容器 div 的大小，请去掉 'style="width: 3000px;"' 行，它仍然可以工作。
示例： http://jsfiddle.net/nm64V/1/
From what I understand, you can solve this issue by wrapping all your content in a div set to the size of the content. Using your example:
Now, whatever width you set the container div to (say, 1500px), both the inner div (with the red border) and your content will be that width, even if it stretches beyond the browser window.
In the case that you don't know what size the container div will be, take out the 'style="width: 3000px;"' line, and it will still work.
Example: http://jsfiddle.net/nm64V/1/
您可能应该提供一个示例来准确说明您正在尝试执行的操作。由于 DIV 是块元素，因此它应该始终占据所有可用宽度，除非它是空的或浮动的。
您所说的“内容”是在 DIV 中还是在页面的其他位置？
You should probably provide an example of what you're trying to do precisely. As a DIV is a block element, it should always take all the width available, unless it's empty or floated.
Is the "content" you're talking about inside that said DIV or somewhere else in the page?