html - 使用 width=100% 给出奇怪的滚动条问题

Question

在我的页面上，我将几个元素定义为窗口宽度的 100%，但是我从一些 div 中得到了意想不到的结果。例如，如果我使用 console.log 打印出 window.innerWidth，我得到的值为 1541，但是当检查 html、body 和其他一些设置为 width=100% 的 div 时，它们的计算宽度是1526.

更奇怪的是，在内容开始对浏览器来说太宽之前，我会开始看到一个水平滚动条，一些元素跨越滚动条，而另一些则没有。

确实是一个非常奇怪的问题，如果有人能指出我正确的方向，请查看该站点，那将是很棒的:

http://www.newnoisegroup.org

Answer 1

div 元素(和其他 display:block 元素)默认拉伸(stretch)到它们容器的宽度，所以设置 width:100% 对于他们来说通常是不必要的。

但是，如果您确实将它们设置为 width:100%，您可能会遇到这样的问题，因为 width:100% 与 stretch to 不同全宽。

区别在于，在标准盒模型中，元素的宽度是内部宽度；边框和边距添加在框外。

因此，如果你有一个 width:100%and, example,border:1pxandmargin:5px`，你将得到 100% 的宽度加上额外的 12 个像素。这显然会给你不需要的滚动条，因为盒子比它的容器宽。

这里有两种解决方案:

1. 使用 width:auto 或完全不设置 width 而不是 width:100%。

2. 使用box-sizing:border-box切换框模型，使border和margin在width内，这样width :100% 然后将生成一个实际上是其容器宽度 100% 的框。

希望对您有所帮助。