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

残りのページの高さを DIV 要素で占める

Web 開発では、多くの場合、ページの高さを埋めるために高さを自動的に調整する要素が必要になります。ページ上の残りのスペース。この場合、最初の DIV (#div1) を考慮した後の残りの高さを 2 番目の DIV (#div2) が占めるようにすることが問題になります。

これを実現するには、CSS 絶対配置が使用されます。

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

絶対配置では、#div2 がページの通常のフローから削除され、その位置は最も近い位置にある祖先を基準にして決定されます。 (#div1).

• top: 50px: #div1 と #div2 の上部の間の距離を指定します。
• bottom: 0: #div2 が垂直方向に拡張されて、下端までの残りのスペースが埋まるようにします。 page.

このアプローチにより、#div2 はページの高さに基づいてその高さを動的に調整し、#div1.

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