我在页面上有两个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>
tw1*_*w16 27
问题是由你#grid有一个width:1140px.
您需要设置一个min-width:1140px上body.
这将阻止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;
}
Jos*_*eti 10
html, body{
width:100%;
}
这告诉html是100%宽.但100%指的是整个浏览器窗口的宽度,所以不超过这个.
您可能需要设置最小宽度.
html, body{
min-width:100%;
}
因此,如果需要,它将至少100%,更多.