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

我在页面上有两个div。一个网格容器，它需要一个背景和一个内部网格，这个网格需要位于另一个网格的中心。我的css：css 100％宽度div不占用父宽度的全部宽度

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>

来源

2011-08-24 panzhuli

您可以添加您的HTML吗？ –

这是合乎逻辑的。您告诉浏览器将宽度设置为浏览器的100％。 – Luuk

删除宽度：100％，它应该做的伎俩。 http://www.impressivewebs.com/width-100-percent-css/ – 2011-08-24 15:03:52

问题是由#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; 
}

来源

2011-08-24 15:12:07 tw16

出于某种原因，＃grid-container仍然需要宽度：100％。不知道为什么，但你去了。谢谢！ – panzhuli

“删除宽度：100％，因为块级元素默认占用可用宽度。” - 感谢我正在寻找的协议 –

取出width:100%;声明。

块元素默认应占用整个可用宽度。

来源

2011-08-24 15:04:23 Geert

不错，谢谢！ – RynoRn

html, body{ 
    width:100%; 
}

这告诉html是100％宽。但100％是指整个浏览器窗口的宽度，所以不超过。

您可能需要改为设置最小宽度。

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

所以它会100％作为最低限度，如果需要更多的机器人。

来源

2011-08-24 15:04:33

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

回答

相关问题