Question

我想制作布局，我将拥有不同的全宽背景。例如top是全宽橙色，在全宽div内部我有容器，可以将所有东西保持在特定的尺寸（宽度：1000px）。我遇到了一个问题，容器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;
}

我很抱歉我的英语不好。

Answer 1

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

这是一个让你玩http://jsfiddle.net/dv9ah/的JS小提琴

    height: auto;

<。>在.red和.orange类中，但您可以将它们更改为设置高度（如100px）以查看它们如何更改。

Div容器没有拉伸主全宽div

1 个答案: