0

私は3つのコンテナ構造を持っています。コンテナ 1 の高さは x です...コンテナ 2 はウィンドウの残りの部分を埋めます...コンテナ 3 はコンテナ 2 の後に開始する必要がありますが、消えてしまいました。

JSFIDDLE

HTML

<header>
</header>
<div id="maincontent">
</div>
<footer>
</footer>

CSS:

html,body{padding:0; margin:0;}

    header{
        background-color:red; 
        height:1.8em;
    }
    #maincontent{
        background-color:black; 
        position:absolute;
        top:1.8em;
        bottom:0;
        width:100%;

    }
    footer{
        background-color:yellow;
        height:50px;
    }

コンテナー 3 を取得するにはどうすればよいですか (コンテナー 2 に続くフッター)。問題を引き起こしているコンテナ2の絶対位置はわかっていますが、それがそのコンテナを画面いっぱいに表示できる唯一の方法です。

マージンをいじってみましたが、役に立ちませんでした。

私が達成しようとしていることのより明確な説明:

コンテナ 1 + コンテナ 2 = 100% の高さ。次に、スクロールしてコンテナ 3 を表示します。

私はこれをjavascriptで達成できましたが、cssで可能であることを望んでいました.

4

4 に答える 4