div容器未拉伸主要全寬div

Question

我想進行布局，使我將擁有不同的全角背景。 例如，頂部是全角橙色，在全角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;
}

對不起，我的英語不好。

Answer 1

如果您在DIV中添加了更多內容，它們將會擴展。 它們的默認高度是auto（ http://www.w3schools.com/cssref/pr_dim_height.asp ），它會自動將div拉伸到所需的高度。 如果將高度設置為百分比，則div將為其父容器的百分比。

這是一個JS小提琴，供您與http://jsfiddle.net/dv9ah/一起玩。

    height: auto;

在.red和.orange類中，但是您可以將它們更改為設置的高度（例如100px），以查看它們如何變化。