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

【问题标题】：css 100% width div not taking up full width of parentcss 100% 宽度 div 不占用父级的全宽
【发布时间】：2011-11-02 21:49:10
【问题描述】：

我在一个页面上有两个 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;
}

此时，#grid-container 的 bg 图片只填满了窗口，而不是 html 的全宽。其症状是，如果您缩小浏览器窗口以便需要水平滚动条并刷新页面，则 bg 图像会在浏览器窗口结束的位置结束。当我向右滚动时，bg 图像不存在。想法？

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

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>

【问题讨论】：

你能添加你的HTML吗？
这是合乎逻辑的。您告诉浏览器将宽度设置为浏览器的 100%。
删除 width:100% 就可以了。 impressivewebs.com/width-100-percent-css

标签： css html width

【解决方案1】：

删除width:100%; 声明。

默认情况下，块元素应该占据整个可用宽度。

【讨论】：

这是错误的。达到完整评论长度的随机事物
是的，如果不是100%，那就是显示错误，或者是父级的问题。

【解决方案2】：

html, body{ 
  width:100%;
}

这告诉 html 是 100% 宽。但是 100% 是指整个浏览器窗口的宽度，所以仅此而已。

您可能想要设置一个最小宽度。

html, body{ 
  min-width:100%;
}

所以它至少会是 100%，如果需要的话会更多。

【讨论】：

【解决方案3】：

问题是由您的#grid 具有width:1140px 引起的。

您需要在body 上设置min-width:1140px。

这将阻止body 变得小于#grid。删除width:100%，因为块级元素默认占用可用宽度。实例：http://jsfiddle.net/tw16/LX8R3/

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;
}

【讨论】：

由于某种原因，#grid-container 仍然需要宽度：100%。不知道为什么，但你去。谢谢！
"删除宽度：100%，因为块级元素默认占用可用宽度。" - 感谢我一直在寻找的认可