css 100％width div不占用父宽度

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

解决方法

问题是由#grid的宽度：1140px导致的。

您需要在身体上设置最小宽度：1140px。

这将阻止身体小于#grid。删除宽度：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;
}

css 100％width div不占用父宽度

解决方法

猜你在找的CSS相关文章