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

Div 要素の残りの高さを占有する

Web デザインでは、div 要素に残りの高さを占有する必要がある状況に遭遇することがあります。ページの高さ。次のシナリオを考えてみましょう: 次のコードを持つ 2 つの div があるとします:

<div>

ページの残りの高さを div2 に占有させるにはどうすればよいですか?

解決策: 絶対配置

これを実現するには、次の CSS で絶対配置を利用できます:

#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 は、上マージンが 50px (div1 の高さ) に設定され、下マージンが 0 に設定されて絶対位置に配置され、残りの高さを占めます。

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