html - ブラウザー ウィンドウの高さの div の下に div をスタックしようとしています

Question

ブラウザ ウィンドウと同じ高さの div と、この div の下にある別の div が必要です。

私の試みはすべて、divを積み重ねることができず、代わりにそれらを重ねることができません。

私のプロジェクトが試みていることの素朴な実装。

これが私のフィドルです

<div class="main">
    <div class="top">
        <p>one</p>
    </div>
    <div class="bottom">
        <p>two</p>
    </div>
</div>

緑はページ全体、赤はウィンドウのサイズ、黄色は赤の下に配置されています...ページをスクロールして黄色を確認できます。

Answer 1

これはあなたが探しているものですか？

フィドル

<div class="top"></div>
<div class="bottom"></div>

CSS

html,body, .top
{
    height: 100%;
}
.top
{
    background: red;
    width: 100%;
}
.bottom
{
    background: yellow;
    height: 100px; 
    width: 100%;

}