关于css：html，body和div设置为100％宽度，但仍不能完全使用100％


html, body, and div set at 100% width but it's still not taking the full 100%

我将页边距和填充重新设置为0。我将<html>，<body>宽度设置为100％。

我的CSS看起来像这样：

1
2
3
4
5
6
7
8
9
10
11
12
html, body {
    margin:0;
    padding:0;
    width:100%;
}

#wrapper {
    margin:0;
    padding:0;
    width:100%;
    background-color:#ccc;
}

每当我将浏览器的大小调整到可以得到水平滚动条的程度时，div都不会完全占据100％的宽度。甚至没有正文或html。我对它进行了调试，大约有180px的间隙。

enter image description here

您可以为此使用溢出

1
2
3
4
5
6
7
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow: auto;
}

我也遇到了类似的问题，我用了这个

简短回答：

  • 您的浏览器快捷方式(Chrome = Ctrl + Shift + I，Firefox = Ctrl + Shift + C)
  • 将鼠标放在间隙上，然后一直沿其向下移动，以找到引起问题的元素
  • 修理它

更长的答案：

如Dan Kanze所说，如果存在一致的间隙，则意味着包装器内部的某些元素正在引起偏移。

为进一步帮助您，我建议您使用一个不错的devtools，您可以在两个Chrome浏览器中找到它们devtools屏幕截图

如果存在一致的180px间隙，则意味着包装器内部的元素正在引起偏移。

您的容器元素看起来不错。

要找到culprite FF，有一个出色的调试工具可用于这种3D模式。这将向您显示主容器中的异常值，您可以在其中选择并找到代码中的元素。

通过链接，我可以为您提供进一步的帮助。

相关讨论