微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决100%DIV宽度实际上不是100%

| 当我有
<div>
width: 100%
时,并不是100%:
<div id=\"div\">testtesttesttesttest</div>

...

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

解决方法

        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%。只需将其删除。     

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。