html - 要素を利用可能な高さに塗りつぶす

Question

ページの中央に配置するには、要素の余白を拡大する必要があります。

要素 1 と 3 は、それぞれ上部と下部に貼り付ける必要があります。
要素 2 の高さは固定で、ページの中央に配置する必要があります。

これを十分に明確に説明しているかどうかわからないので、絵を描きました。

Answer 1

絶対配置を使用して、要素 1 と要素 3 をそれぞれページの上部と下部に固定します。次に、要素 2 の上部を絶対に配置し50%、その高さの半分の負の上部マージンを設定します。

#top, #middle, #bottom { position: absolute; left: 0; right: 0; }
#top { top: 0; }
#middle { top: 50%; margin-top: -25px; height: 50px; }
#bottom { bottom: 0; }

それを試してみてください。

Answer 2

または、次のようにすることもできます。

body, html {
    height: 100%;
    display: table;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
header, div, footer {
    width: 100%;
    display: table-row;
}
header {
    height: 50px;
}
footer {
    height: 50px;
}