logo标签列表

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

csshtmlscrollwidth
33

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

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

...

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

当你调整窗口大小时，出现水平滚动条，并向右滚动时，背景会消失。如何在这种情况下保留背景？

您可以在此处查看问题的实际情况：http://beta.ovoweb.net/?i=3

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

1
尝试在CSS中添加margin: 0;？对于body以及DIV本身。 - Shadow The Spring Wizard
3
问题不在于该元素本身，而是其父元素。你需要提供你的HTML/CSS代码。最好提供一个实际链接，否则提供一个jsFiddle演示也可以。 - thirtydot
div 的宽度默认为 100%，因此它可能是父元素！ - Ahmed Magdy
1
提醒其他遇到同样问题的人，如果你的div没有内容（除了带有float: left或float: right的子元素，这些不算），设置width: 100%（或任何其他值）没有效果；div必须有内容才能使width生效。在这种情况下，只需添加一个空格（&nbsp;）即可解决。我曾经被这个问题困扰，所以我想发表一条评论，以防万一！ - Dan Nissenbaum
@DanNissenbaum，有没有CSS的解决方案可以解决这个问题？ - randy
9个回答
32

百分之百的值是父元素的宽度或视口的百分之百。请参见 文档。

2
那么如何使整个页面主体动态缩放以随着浏览器窗口的扩大而扩大呢？ - Information Technology
2
这超出了这个问题和答案的范围。 - James Sumners
23

宽度为100%，严重受到其父元素的外边距和内边距（在您的情况下为body）的影响，因此首先要重置它们。

可以尝试使用如下代码：

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

演示

1
父级div的填充使我困扰。 - Anthony
5

将以下内容添加到CSS中：

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

然后它应该可以工作。
2

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

2
在我的情况下，div标签没有占据其父标签的100％，因为div的显示方式为“inline”。将其更改为“inline-block”可以解决此问题。
2
这应该可以解决问题（将此行添加到CSS文件的顶部）：
* { margin: 0; padding: 0; }

对我来说一直都很有效。

1

我大多数时候都会在我的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>

输出

enter image description here

1

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

 #div  {
    max-width: 300px;
}

或者

 #div  {
    max-width: 50%;
}

这会导致宽度不是页面的100％。只需将其删除即可。
0
如果您在类中包含了`row`，有时会导致问题，请将其移除并添加到一个新的`div`中。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接