DIV 宽度：当窗口调整到小于主要 DIV 的大小时，100% 创建一个空间答案

【问题标题】：DIV width: 100% creates a space when is the window resize to a size less than major DIVDIV 宽度：当窗口调整到小于主要 DIV 的大小时，100% 创建一个空间
【发布时间】：2013-09-02 06:29:14
【问题描述】：

我得到了一个 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%;
}

但是，当我将窗口大小调整为小于 1000 像素时，#main-container 会创建一个空白空间。

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

我想删除这个空间，让#main-container 有全宽

【问题讨论】：

我不确定我是否理解这个问题，但您是否尝试在您的#header 中使用max-width: 1000px; 而不是width？

标签： css

【解决方案1】：

您看到的是正确的 CSS 行为。

例如，考虑您的 HMTL sn-p：

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

【讨论】：