div 容器没有拉伸主要的全宽 div答案

【问题标题】：Div container is not stretching the main full width divdiv 容器没有拉伸主要的全宽 div
【发布时间】：2013-12-03 02:17:18
【问题描述】：

我想在有不同全宽背景的地方进行布局。例如，顶部是全宽橙色，在全宽 div 内，我有一个容器，可以将所有内容保持在特定尺寸（宽度：1000 像素）。我遇到了一个问题，容器 div 的内容不会拉伸整个宽度的 div。所以现在要让它继续工作，我必须设置 .orange 和 .red 的特定高度。但这不是解决方案，因为现在我的块有 xxx 高度，如果我添加更多图片之类的东西 - 我必须设置更大的高度等...

这就是我的意思：

HTML

<div class="full-width orange">
    <div class="container">
        content
    </div>
</div>

<div class="full-width red">
    <div class="container">
        content 2
    </div>
</div>

CSS

.full-width {
    clear: both;
    width: 100%;
    overflow: hidden;
}

.container {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.orange {
    background-color: orange;
}

.red {
    background-color: red;
}

对不起，我的英语不好。

【问题讨论】：

您使用的是哪个浏览器？我使用您的原始代码创建了jsfiddle.net/wVCLT，并在没有指定 1000px 的情况下创建了jsfiddle.net/wVCLT/1。据我所知，事情看起来不错。基于 jsfiddle，您能否提供更多有关问题的详细信息？另外，我正在 Firefox 中进行测试。
Opera、firefox、chrome。在这些容器中，我有绝对位置上的元素，并且我有左右浮动的元素。但我一直清除它们。
也许您可以更新您的代码示例以更好地显示您的问题？我仍然对出了什么问题感到模糊。您可以更新我创建的 jsfiddle（进行更改并单击“更新”），然后其他人可以看到代码不起作用。
我在那里放了很多代码。如果有人可以提供帮助，我可能会更私密地发送它。如果是这样，请给我发电子邮件。

标签： html css

【解决方案1】：

如果您将更多内容放入您的 DIV 中，它们将会伸展。它们的默认高度是 auto (http://www.w3schools.com/cssref/pr_dim_height.asp)，它会自动将 div 拉伸到它需要的高度。如果将高度设置为百分比，则 div 将是其父容器的百分比。

这里有一个 JS fiddle 供你玩 http://jsfiddle.net/dv9ah/ 我设置了

    height: auto;

在 .red 和 .orange 类中，但您可以将它们更改为设定的高度（如 100 像素）以查看它们如何变化。

【讨论】：

好吧对不起我的错。你是对的 - 如果我没有搞砸，它会工作得很好。我只是没有注意到我正在使用绝对位置复制课程。这就是为什么它没有拉伸其余部分。感谢您的帮助。