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

| 当我有<div>和width: 100%时，并不是100％：

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

...

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

现在，当您调整窗口大小时，会有一个水平滚动条，然后向右滚动，然后背景就消失了。在这种情况下如何保持背景？在这里，您可以看到实际的问题： http://beta.ovoweb.net/?i=3 现在，当您调整窗口大小并向右滚动时，您将不再看到背景。如何解决？

已邀请:

8 个回复

吠强祷豪硅

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

草票

宽度：100％，受其边距以及其父对象（在您的情况下为body）的边距和填充的影响很大。所以，先重置它们就像是

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

演示

很缴

将此添加到CSS：

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

然后它应该工作。

磋判粗惊

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

壬驴拿歪竞

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

* { margin: 0; padding: 0; }

一直为我工作。

谷靛

我大多数时候都将这段代码添加到我的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>

输出值

弦砂牧扁

在我的情况下，div标签没有占用其父标签的100％，因为div显示为\“ inline。\”。将其更改为\“ inline-block \”解决了该问题。

夏瓤跋棘

检查您是否在div或其父级中包含以下代码：

 #div  {
    max-width: 300px;
}

要么

 #div  {
    max-width: 50%;
}

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

要回复问题请先登录或注册

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

8 个回复

发起人

css

html

scroll

width

问题状态

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

与内容相关的链接

8 个回复

发起人

css

html

scroll

width

问题状态