100% DIV 宽度并不是真正的 100%

Question

当我有一个 <div> 和 width: 100% 时，它并不是真正的 100%：

 <div id="div">testtesttesttesttest</div>

...

#div {
  width: 100%;
  background-color: red;
}

现在当你调整窗口大小时，有一个水平滚动条，你向右滚动，背景就消失了。在这种情况下我怎样才能保留背景？

在这里你可以看到实际的问题： http ://beta.ovoweb.net/?i=3

现在，当您调整窗口大小并向右滚动时，您就再也看不到背景了。如何解决这个问题？

原文由 www.data-blogger.com 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

100% 值是父级宽度或视口的 100%。请参阅 文档。

原文由 James Sumners 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

宽度：100%，受其父级（在您的情况下为正文）的边距和边距和填充的影响很大。所以，先重置它们

就像是

body {
    margin: 0;
    padding: 0;
}
#div {
  margin: 0;
  width: 100%;
  background-color: red;
}

演示

原文由 Starx 发布，翻译遵循 CC BY-SA 3.0 许可协议