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

HTML と CSS で Div が残りの高さを占めるようにする方法

HTML では、1 つの div が残りの高さを占める必要がある特定のレイアウトを実現するのが一般的な課題となることがあります。ページの残りの高さ。 2 つの div がある状況を考えてみましょう:

<div>
<p>目標は、#div2 がページの残りの高さを埋めることです。絶対配置を使用した解決策は次のとおりです。</p>
<pre class="brush:php;toolbar:false">#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 には 50px の固定高さが与えられ、#div2 は絶対配置され、残りのスペースを占有するようになります。最上位のプロパティは、#div1 の高さである 50px に設定されます。 Bottom プロパティは 0 に設定され、#div2 がその親 (この場合はページ自体) の下部に固定される必要があることを示します。これにより、#div2 はページの残りの高さを占めるように動的に伸縮します。