php - 基本的なCSSの問題

Question

これで時間を無駄にしてすみません。私はcssで背景色をスタックするページを取得しようとしていましたが、これを行う方法を尋ねる方法がわかりませんでした。たとえば、高さ150ピクセルの白いヘッダーセクションを作成し、その真下に高さ20ピクセルの特定の色を配置してページの幅を拡大し、これをさらに2、3回繰り返します。他の色で時間を計り、次に別の大きな白いフッターで終わります。これを何と呼ぶか​​わからない。アメリカの国旗の白と赤のように積み重ねるだけで、浮くものは必要ないと思います。何かご意見は？

Answer 1

何か試したことはありますか？

<div style="height: 150px; background: #fff;"></div>
<div style="height: 20px; background: red;"></div>
<div style="height: 20px; background: blue;"></div>
<div style="height: 150px; background: #fff;"></div>

Answer 2

ページ上で伸ばすには、 position:absolute を使用できます

CSS

#container {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
}
.white {
    background:white;
    height: //height;
}
.blue {
    background:blue;
    height: //height;
}
.red {
    background:red;
    height: //height;
}

HTML

<div id="container">
    <div class="white"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="white"></div>
</div>

Answer 3

赤白と青を繰り返したい場合は、赤白と青の 1 つの「繰り返し」を持つ背景画像を使用できますbackground: repeat-y。ページ全体の高さを繰り返したくない場合は、これを div に入れて高さを制御できます。

<div style="height:80%; background:url('flag.png') repeat-y;></div>

たぶんそのようなものですか？