div がページの残りの高さを占めるようにするにはどうすればよいですか?

最適な Div の高さの占有を達成する

Web レイアウトを使用する場合、多くの場合、ページの残りの高さを div で占有する必要があります。次のケースを考えてみましょう: 2 つの div で、1 つは高さが固定されており、もう 1 つは残りのスペースを埋めることを目的としています。

<div>

div2 がページの残りの高さを確実に占めるようにするには、効果的な解決策は次のとおりです。絶対配置を採用します:

#div1 {
    width: 100%;
    height: 50px;
    background-color: red; /* Development Only */
}
#div2 {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color: blue; /* Development Only */
}

このアプローチでは、div1 は固定の高さを維持しますが、div2 は絶対的に配置され、div1 の下部から開始してページの下部までの残りの垂直スペースを占有し、効果的に埋められます。残りの高さ。

以上がdiv がページの残りの高さを占めるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。