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

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

Answer 1

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

Answer 2

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

像

这样的东西

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

DEMO

Answer 3

将此添加到css：

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

然后它应该工作。

Answer 4

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

Answer 5

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

* { margin: 0; padding: 0; }

一直为我工作。

Answer 6

我大部分时间都会将this bit of code添加到我的CSS中。它也适合你。是的，100％宽度或高度始终基于父容器。

<强> 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>​

<强>输出

Answer 7

在我的情况下，div标签没有占用其父标签的100％，因为div显示为“内联”。将其更改为“内联块”修复了该问题。

Answer 8

检查您的div中是否包含此代码或其父代码：

 #div  {
    max-width: 300px;
}

或

 #div  {
    max-width: 50%;
}

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

Answer 9

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