Question

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

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

确实是一个非常奇怪的问题，如果有人能指出我的方向非常棒，请查看该网站：

http://www.newnoisegroup.org

Answer 1

无论如何，

div元素（以及其他display:block元素）默认延伸到其容器的宽度，因此无论如何都要为它们设置width:100%。

但是，如果您将其设置为width:100%，则可能会出现类似的问题，因为width:100%与stretch to full width不同。

不同之处在于，在标准框模型中，元素的width是内部宽度;边框和边距添加在框外。

因此，如果您有一个宽度为100％and, for example,边框：1px and页边距：5px`的框，您将获得100％宽度加上额外的12个像素。这显然会给你不需要的滚动条，因为盒子比它的容器宽。

这里有两种解决方案：

完全使用width:auto或width设置而不是width:100%。
使用box-sizing:border-box切换框模型，使边框和边距位于width内，这样width:100%就会生成一个实际上是100％的框它的容器宽度。

希望有所帮助。

Answer 2

使用box-sizing可以解决宽度问题。

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;

它通常会解决width和margin / padding

的问题

使用width = 100％会产生奇怪的滚动条问题

2 个答案: