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

【问题标题】：100% DIV width is not really 100%100% DIV 宽度并不是真正的 100%
【发布时间】：2011-09-14 17:19:06
【问题描述】：

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

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

...

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

现在，当您调整窗口大小时，会有一个水平滚动条，然后您向右滚动，那么背景就会消失。在这种情况下，我怎样才能保持背景？

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

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

【问题讨论】：

尝试将margin: 0; 添加到 CSS 中？致 body 以及 DIV 本身。
问题不在于那个元素，而在于它的父元素。您需要提供您的 HTML/CSS。最好使用实时链接，否则 jsFiddle demo 就足够了。
div 默认宽度是 100% 所以它可能是父级！！
请注意其他任何为此苦苦挣扎的人，如果您的 div 没有内容（带有 float: left 或 float: right 的子元素除外，不计算在内），请设置width: 100%（或任何其他值）无效； div 必须有内容才能使width 设置生效。在这种情况下，只需添加一个空格 (&nbsp;) 即可。我对此有所了解，所以我想我会发表评论，以防万一！

标签： css html scroll width

【解决方案1】：

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

【讨论】：

那么如何让整个页面主体随着浏览器窗口的扩大而动态缩放？
这超出了本问答的范围。

【解决方案2】：

宽度：100%，受到其父级（在您的情况下为主体）的边距和边距以及填充的高度影响。所以，先重置它们

类似

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

DEMO

【讨论】：

父 div 的填充弄乱了我

【解决方案3】：

100% 只是可用宽度的 100%，基于父容器。因此，如果您创建一个宽度为 500 像素的 DIV，然后在其中嵌套另一个宽度为 100% 的 DIV，则您的 100% DIV 可以扩展到最大 500 像素（不计算任何填充或边距，因此您需要将它们重置为 0）。

【讨论】：

【解决方案4】：

将此添加到 css：

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

那么它应该可以工作了。

【讨论】：

【解决方案5】：

应该这样做（将此行添加到 CSS 文件的最顶部）：

* { margin: 0; padding: 0; }

一直为我工作。

【讨论】：

【解决方案6】：

我大部分时间都将this bit of code 添加到我的css。它也应该对你有用。是的，100% width 或 height 始终基于父容器。

CSS

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

#container {
  width: 100%;
  height: 100%;
  background: gray;
  position: relative;
  display: block;
}

#content {
  height: 50px;
  width: 50px;
  bottom: 20px;
  right: 10%;
  background: red;
  position: absolute;
}

HTML

<div id="container">
  <div id="content"></div>
</div>

输出

【讨论】：

【解决方案7】：

在我的例子中，div 标签没有占用其父标签的 100%，因为 div 显示的是“内联”。将其更改为“inline-block”可以解决该问题。

【讨论】：

【解决方案8】：

检查您是否在 div 或其父级中有此代码：

 #div  {
    max-width: 300px;
}

或

 #div  {
    max-width: 50%;
}

这会导致宽度不是页面的 100%。只需将其删除。

【讨论】：

【解决方案9】：

如果你的类中包含行，那么它有时会导致问题，请将其删除并将其添加到新的 div 中

【讨论】：