Question

我想让单个列布局工作。该页面有三个部分，标题区域，内容区域和页脚区域。每个部分都有不同的背景图像，我想要跨越用户屏幕上可视区域的整个宽度。我将这些部分拆分为div，如下面的代码所示，以便中间的内容区域随着内容的增长而增长。

我的问题是，当我通过在浏览器（Chrome）中按ctrl +来增加文本的大小时，轮播部分会溢出背景区域。以下是调整大小之前和之后的屏幕截图。

HTML / CSS代码模型很简单，但我无法弄清楚为什么会发生溢出。有任何想法吗？我是CSS / XHTML的新手 - 有没有其他标准方法可以实现我想要实现的目标？

Before resizing

After resizing

<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="header_container">
    <div id="header">
        Header text
    </div>
</div>

<div id="content_container">
    <div id="content">
        The content

        <div id="carousel">
        The carousel
        </div>

        <div id="clear_div">
        </div>
    </div>
</div>

<div id="footer_container">
    <div id="footer">
        The footer
    </div>
</div>

</body>
</html>

以下是HTML的CSS：

#header_container {
    width: 100%;
    background-color: green;
}

#header {
    width: 960px;
    margin: auto;
}

#content_container {
    width: 100%;
    background-color: lightblue;
}

#content {
    width: 960px;
    margin: auto;
    position: relative;
}

#carousel {
    float: right;
    width: 300px;
    height: 200px;
    background-color: red;
}

#clear_div {
    clear: both;
}

#footer_container {
    width: 100%;
    background-color: lightgray;
    clear: both;
}

#footer {
    width: 960px;
    margin: auto;
}

Answer 1

问题是“宽度：100％;” #content_container （蓝色背景）的计算不是来自实际内容宽度，而是来自浏览器窗口宽度。因此窗口宽度变得小于 #content 宽度（固定为960px）， #content 开始从背景中出现。

示例：

浏览器窗口宽度为500px。
#content_container ， #header_container 和 #footer_container “width：100％”也变为500px。
#content width = 960px，比 #content_container 宽度多440px。
#content 的右侧来自 #content_container ，适用于440px。

然后你在浏览器中增加大小同样的事情（ #content 宽度变得超过 #content_container 宽度）。

您可以修复它，例如，添加属性“min-width：960px;” #content_container ， #header_container 和 #footer_container ，因此它们的宽度或宽度始终相同。

编辑：查看最小宽度的实时示例：http://jsfiddle.net/Xqtuh/

CSS / HTML - 在浏览器调整大小时在单个列布局中溢出

1 个答案: