我得到了一个div#标题宽度:1000px;
#header {
width: 1000px;
margin: auto;
height: 164px;
}
全宽中的div#主容器
#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}
但是,当我将窗口的大小调整为小于页眉上设置的1000px时,#main容器会创建一个空白空间。
http://tinypic.com/view.php?pic=1zcmmpf&s=5
我想去掉这个空间,让#主容器有全宽
您看到的是正确的CSS行为。
例如,考虑您的HMTL片段:
<div id="header"></div>
<div id="main-container"></div>
具有以下CSS:
body {
margin: 0;
}
#header {
width: 1000px;
margin: auto;
height: 164px;
background-color: yellow;
}
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
}
请参阅演示:http://jsfiddle.net/audetwebdesign/5xwRu/
对于宽度超过1000px的页面,您的页眉将按预期居中。
因为#main-container
的宽度为100%,所以背景图像会填充页面的宽度。
当你将页面宽度减少到1000px以下时,你会看到一个水平滚动条出现,因为固定宽度的标题太宽,无法放入视图端口,这会触发溢出条件。
在这种情况下,CSS引擎在#main-container
的右侧创建一些空白,因为#main-container
的计算宽度小于1000px,并且它填充了视图端口宽度(小于1000px),其中不包括为溢出内容创建的空间。
你可以通过多种方式来解决这个问题,但这在一定程度上取决于你想做什么
您可以设置最小宽度如下:
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
min-width: 1000px;
}
参见示例2中的小提琴。
注意:您可能有一个应用了CSS属性overflow: hidden
的包装容器。如果是这种情况,您可能看不到水平滚动条。