CSS 100％宽度div不占用父级的全部宽度 [英] css 100% width div not taking up full width of parent
问题描述
我在页面上有两个div.一个带有背景的网格容器和一个需要放置在另一个网格中心的内部网格.我的CSS:
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:
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图像将在浏览器窗口结束的位置结束.当我向右滚动时，背景图像不存在.想法?
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?
好的，根据请求，我已经编辑了CSS/HTML.当我删除#grid-container中的宽度指定时，它缩小到其中的容器的宽度，甚至更糟.这是我现在拥有的:
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:
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 具有 width:1140px 引起的.
The problem is caused by your #grid having a width:1140px.
您需要在 body 上设置一个 min-width:1140px .
这将阻止 body 变得小于 #grid .删除 width:100％，因为块级元素默认占用可用宽度.实时示例: http://jsfiddle.net/tw16/LX8R3/
This will stop the body from 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/
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％宽度div不占用父级的全部宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
