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>
问题是由#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%。不知道为什么,但你去了。谢谢! – panzhuli
“删除宽度:100%,因为块级元素默认占用可用宽度。” - 感谢我正在寻找的协议 –
html, body{
width:100%;
}
这告诉html是100%宽。但100%是指整个浏览器窗口的宽度,所以不超过。
您可能需要改为设置最小宽度。
html, body{
min-width:100%;
}
所以它会100%作为最低限度,如果需要更多的机器人。
您可以添加您的HTML吗? –
这是合乎逻辑的。您告诉浏览器将宽度设置为浏览器的100%。 – Luuk
删除宽度:100%,它应该做的伎俩。 http://www.impressivewebs.com/width-100-percent-css/ – 2011-08-24 15:03:52