当元素的内容更宽时，如何让元素保持在浏览器的窗口宽度内？答案

【问题标题】：How can I get an element to stay within the browser's window width when its content is wider?当元素的内容更宽时，如何让元素保持在浏览器的窗口宽度内？
【发布时间】：2015-05-10 04:03:05
【问题描述】：

我试图让一个 div 扩展以填充其容器，而不会导致该容器扩展超出浏览器窗口的宽度，如 this page。点击最后一个条目中“堆栈跟踪”旁边的“展开”。

它应该做的是显示一个水平滚动条。

它实际上在做的是超出窗口的宽度。

如果我给<div class="stack"> 元素以像素为单位的max-width，我可以让它工作，但我希望它扩展以填充无论窗口有多宽，而不超出它。

如何修复此布局？使用 css 使元素水平扩展以填充其容器而不超出窗口边缘的一般方法是什么？

【问题讨论】：

无法访问您的页面。请将您的相关代码添加到您的问题中，以便我们尝试重现您的问题。

标签： html css page-layout

【解决方案1】：

页面现已重新打开！

我无法整理你的餐桌。有一些无效的宽度参数。您应该使用 div-Containers 而不是表格来布局您的页面！

【讨论】：

我正在修改（或者更准确地说，修改）dotProject 以供我公司内部使用，因此完全重写布局不会成功。

【解决方案2】：

我想出的解决方法是将max-width 添加到展开/折叠 div。它真的不会阻止表格比窗口宽，但它解决了 95% 的情况。

【讨论】：

【解决方案3】：

不要使用表格，使用 DIV 和全宽使用

width: 100%;

这将始终占用浏览器窗口宽度的 100%。

【讨论】：

“全宽使用”不是问题。 div 不是太窄，不能占用窗口或容器的宽度。它太宽了；它迫使其容器超出窗口边缘。你能改进或扩展你的答案吗？

【解决方案4】：

您可以为您提供outer Div width:100% 所以它需要browser width。否则，您可以使用 Jquery $(document).width(); 计算浏览器宽度并将其存储在 variable 中并提供给您的外部 div。

【讨论】：

您的 div 答案不清楚，简单地将整个页面或下半部分包裹在 <div style="width: 100%;"> 中并不能解决问题。您的 jquery 答案不相关，因为我正在寻找 css 解决方案。
查看何时将width:100% 应用于outer Div，它将扩展到浏览器端点，之后您将添加的任何内容都可能是DIV 或其他应用它们的显示属性并在@987654330 中给出宽度@它将自动包装在该DIV中。但不要使用 table 或 fixed width 如果您的窗口/文档视口大小较小，那么它将落后于它。