Question

我有一个div #header width：1000px;

#header {
width: 1000px;
margin: auto;
height: 164px;
}

全宽

的div＃main-container

#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}

但是当我将窗口大小调整为在标题上设置的小于1000px的大小时，＃main-container会创建一个空白区域。

http://tinypic.com/view.php?pic=1zcmmpf&s=5

我想删除此空格，并让＃main-container具有全角

Answer 1

您所看到的是正确的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/

对于宽度超过1000像素的网页，您的标题会按预期居中。

您的背景图片会填充页面的宽度，因为#main-container的宽度为100％。

当您将页面宽度减小到小于1000像素时，您会看到一个水平滚动条，因为固定宽度标题太宽而无法放入视图端口，这会触发溢出的情况。

在这种情况下，CSS引擎会在#main-container右侧创建一些空格，因为#main-container的计算宽度小于1000像素，并且它填满了视口宽度（小于1000像素），不包括为溢出内容创建的空间。

你可以通过多种方式解决这个问题，但这部分取决于你想做什么。

您可以按如下方式设置最小宽度：

#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的包装容器。如果是这种情况，您可能看不到水平滚动条。

DIV宽度：100％在窗口调整大小小于主DIV时创建空格

1 个答案: