100%DIV宽度实际上不是100%

问题描述 投票:23回答:8

[当我有一个<div>width: 100%时,它并不是100%:

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

...

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

现在,当您调整窗口大小时,会有一个水平滚动条,然后向右滚动,则背景消失了。在这种情况下如何保留背景?

这里您可以看到问题所在:http://beta.ovoweb.net/?i=3

现在,当您调整窗口大小并向右滚动时,您将不再看到背景。如何解决?

css html scroll width
8个回答
20
投票

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


17
投票

宽度:100%,在很大程度上受其边距以及其父对象(在您的情况下为body)的边距和填充的影响。因此,请先重置它们


4
投票

将此添加到CSS:


2
投票

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


2
投票

这应该做(将这一行添加到您的CSS文件的顶部):


1
投票

我大部分时间都将this bit of code添加到我的CSS中。它也应该为您工作。是的,宽度或高度的100%始终基于父容器。


0
投票

在我的情况下,div标签没有占据其父标签的100%,因为div显示为“内联”。将其更改为“行内阻止”可解决该问题。


0
投票

检查您的div或其父代码是否具有此代码:

© www.soinside.com 2019 - 2024. All rights reserved.