css 100%宽度div不占用父级的全部宽度_Css_Html_Width

css 100%宽度div不占用父级的全部宽度

css html

css 100%宽度div不占用父级的全部宽度,css,html,width,Css,Html,Width,我在一页上有两个div。一个网格容器，它包含一个背景和一个需要放置在另一个网格中心的内部网格。我的css： html, body{ margin:0; padding:0; width:100%; } #grid-container{ background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left; width:100%; } #grid{ width:1140px; margin:

我在一页上有两个div。一个网格容器，它包含一个背景和一个需要放置在另一个网格中心的内部网格。我的css：

html, body{ 
  margin:0;
  padding:0;
  width:100%;
}
#grid-container{
  background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
  width:100%;
}
#grid{
  width:1140px;
  margin:0px auto;
}

此时，#网格容器的bg图像只填充窗口，而不是html的整个宽度。这种情况的症状是，如果您缩小浏览器窗口，以便需要一个水平滚动条并刷新页面，则bg图像将在浏览器窗口结束的地方结束。当我向右滚动时，bg图像不在那里。想法

编辑：好的，根据请求，我已经编辑了我的css/html。当我删除#grid容器中的宽度指定时，它会缩小到其中容器的宽度，这更糟糕。以下是我现在拥有的：

html, body{ 
  margin:0;
  padding:0;
  min-width:1140px;
}
body{
    background:url(../images/page-background.jpg) repeat-x top left !important; 
    height:100%;
}
#grid-container{
  background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
  padding-top:1px;
}
#grid-container2{
  width:1140px;
  margin:0px auto;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

以及html：

<!DOCTYPE HTML>
<html>
<head>
---
</head>

<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>


---
...
这里有各种各样的东西

移除

宽度：100%声明
默认情况下，块元素应占据整个可用宽度
html, body{ 
  width:100%;
}

这告诉html是100%宽的。但100%指的是整个浏览器窗口的宽度，所以仅此而已
您可能需要设置最小宽度
html, body{ 
  min-width:100%;
}

因此，它将是100%的最低值，如果需要，会增加。
该问题是由于您的#网格具有宽度：1140px
造成的
您需要在主体上设置最小宽度：1140px

这将阻止主体
小于网格
。删除width:100%
，因为默认情况下块级元素占用可用宽度。实例：
你能添加你的HTML吗？这是合乎逻辑的。您告诉浏览器将宽度设置为浏览器的100%。删除宽度：100%，它应该可以做到这一点。出于某种原因，#网格容器仍然需要宽度：100%。不知道为什么，但你说对了。谢谢“删除宽度：100%，因为默认情况下块级元素占用可用宽度。”-谢谢我刚才的讨论。这是错误的。随机事件达到完整注释长度是的，如果不是100%，则显示错误，或是父项有问题。
html, body{
    margin:0;
    padding:0;
    min-width: 1140px; /* this is the important part*/
}
#grid-container{
    background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
}
#grid{
    width:1140px;
    margin:0px auto;
}