Html css 100% 宽度 div 不占用父级的全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7177675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css 100% width div not taking up full width of parent
提问by panzhuli
I have two divs on a page. a grid-container that takes a background and an internal grid that needs to be positioned in the center of the other grid. My css:
我在一个页面上有两个 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;
}
At this point, the bg image of the #grid-container only fills the window, not the full width of the html. The symptom of this is that if you narrow the browser window so that a horizontal scrollbar is required and refresh the page, the bg image ends where the browser window ends. When I scroll to the right, the bg image is not there. Ideas?
此时，#grid-container 的 bg 图片只填满了窗口，而不是 html 的全宽。这种情况的症状是，如果您缩小浏览器窗口以便需要水平滚动条并刷新页面，则 bg 图像在浏览器窗口结束的地方结束。当我向右滚动时，bg 图像不存在。想法？
EDIT: ok, per requests, I've edited my css/html. When I remove the width designation in the #grid-container, it shrinks to the width of the container within, which is even worse. Here's what I have now:
编辑：好的，根据请求，我已经编辑了我的 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%;
}
and the html:
和 html：
<!DOCTYPE HTML>
<html>
<head>
---
</head>
<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>
采纳答案by tw16
The problem is caused by your #gridhaving a width:1140px.
问题是由于您#grid拥有width:1140px.
You need to set a min-width:1140pxon the body.
您需要min-width:1140px在body.
This will stop the bodyfrom getting smaller than the #grid. Remove width:100%as block level elements take up the available width by default. Live example: http://jsfiddle.net/tw16/LX8R3/
这将阻止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;
}
回答by Jose Faeti
html, body{
width:100%;
}
This tells the html to be 100% wide. But 100% refers to the whole browser window width, so no more than that.
这告诉 html 为 100% 宽。但是 100% 是指整个浏览器窗口的宽度，所以仅此而已。
You may want to set a min width instead.
您可能希望改为设置最小宽度。
html, body{
min-width:100%;
}
So it will be 100% as a minimum, bot more if needed.
所以它至少是 100%，如果需要，机器人更多。
回答by Geert
Remove the width:100%;declarations.
删除width:100%;声明。
Block elements should take up the whole available width by default.
默认情况下，块元素应占据整个可用宽度。
