在我的页面上，有几个元素定义为窗口宽度的100％，但是从某些div中得到了意外的结果。例如，如果我使用console.log打印出window.innerWidth，则得到的值是1541，但是当检查html，body和其他一些设置为width = 100％的div时，它们的计算宽度为1526。
甚至更陌生的是，在内容对于浏览器而言太宽之前，我将开始看到水平滚动条，并且某些元素跨越滚动条，而有些则不会。
确实，这是一个非常奇怪的问题，如果有人可以向我指出正确的方向，那将是很棒的事情，请访问该站点：
http://www.newnoisegroup.org
最佳答案
div元素（和其他display:block元素）默认情况下始终拉伸到其容器的宽度，因此无论如何通常都不需要为其设置width:100%。
但是，如果将它们设置为width:100%，则会出现类似的问题，因为width:100%与stretch to full width不同。
不同之处在于，在标准框模型中，元素的width是内部宽度；边框和边距添加在框的外部。
因此，如果您有一个框宽为100％and, for example, border：1px and margin：5px`的框，则将获得100％的宽度，外加12个像素。由于该框比其容器宽，因此这显然会给您不必要的滚动条。
这里有两种解决方案：
完全使用width:auto或完全不使用width设置，而不要使用width:100%。
使用box-sizing:border-box切换框模型，以使边框和边距位于width内，以便width:100%生成的框实际上是其容器宽度的100％。
希望能有所帮助。
关于html - 使用width = 100％给出奇怪的滚动条问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18666578/