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

Posted 2023-03-06

【中文标题】100% DIV 宽度并不是真正的 100%

【英文标题】：100% DIV width is not really 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 设置生效。在这种情况下，只需添加一个空格 ( ) 即可。我对此有所了解，所以我想我会发表评论，以防万一！

【参考方案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 中