1

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

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

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

http://www.newnoisegroup.org

4

2 回答 2

3

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

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

不同的是，在标准盒子模型中，width一个元素的 是内部宽度；边框和边距添加在框外。

因此，如果您有一个宽度为 100%and, for example,边框：1pxand边距：5px 的框，您将获得 100% 的宽度加上额外的 12 个像素。这显然会为您提供不需要的滚动条，因为框比其容器宽。

这里有两种解决方案：

  1. 使用width:auto或根本不使用width设置，而不是width:100%.

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

希望有帮助。

于 2013-09-06T21:18:23.050 回答
1

使用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

于 2013-09-06T21:16:50.433 回答