如果窗口宽度比内容的其余部分窄，则div不会拉伸页面的100％宽度

Question

如果我调整浏览器窗口的大小（在我的情况下是最新的Chrome），那么它会获得水平滚动条，然后标题div会“切断”。在这种情况下，向右滚动会显示一些空白区域。这是因为除了标题之外的主要内容具有固定的宽度。

但是标题div的宽度为100％，div默认也是一个块元素，所以它应该自己拉伸到页面宽度的100％。为什么不这样做？它不应该是默认行为吗？为什么StackOverflow团队没有解决它？

我在许多页面上发现的问题，包括StackOverflow：

所以我一直在谷歌搜索，甚至找到了解决问题的方法，但还不够令人满意。解决方案是设置min-width property to the width of that 's content。但是没有更好的解决方案吗？

我正在寻找更好的解决方案，如果有的话？此外，我正在寻找一个合理的解释，为什么div的默认行为伸展100％的宽度不适用于此？

Answer 1

检查身体元素，你会发现它只延伸到视口。 topbar-wrapper的固定宽度为980px，其黑色背景，topbar的父级为100％（正文）。 topbar还需要980px的宽度，或者body元素需要min-width：980px ...这里是StackOverflow网站（看起来你发现了一个bug）

这是我经常在自由职业者审阅的构建中发现的问题，他们忘记缩小浏览器。如果场地不是流体并且有固定宽度的元素，则全宽度部分通常需要最小宽度。

Answer 2

“cut-off”div的宽度为可见区域的100％，所以一切都还可以。 问题是，内容溢出，您现在可以滚动到120％的宽度。

要解决此问题并将页面的整个宽度拉伸到“截止”div，您可以应用一些css：

position: absolute;
left: 0;
right: 0;

Answer 3

你看到一个空格，因为在页面的某个地方，很可能是在header元素下面，有一个大于100％的元素 - 这就是你看到水平滚动条的原因。

标题实际上是100％，这意味着它比文档的整个宽度短 - 因此是空格。

要进行调试，我通常会打开检查器并从底部开始到顶部并逐个删除标题的兄弟，直到我到达一切不再是空白的点。那时你知道问题在于你刚刚删除的最后一个元素。尝试在该特定元素中查找错误。