ホームページ  >  記事  >  ウェブフロントエンド  >  HTML と CSS でページの残りの高さを Div が占めるようにするにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-11-09 06:47:02258ブラウズ

How to Make a Div Occupy the Remaining Height of a Page in HTML and CSS?

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

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

<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 には 50px の固定高さが与えられ、#div2 は絶対配置され、残りのスペースを占有するようになります。最上位のプロパティは、#div1 の高さである 50px に設定されます。 Bottom プロパティは 0 に設定され、#div2 がその親 (この場合はページ自体) の下部に固定される必要があることを示します。これにより、#div2 はページの残りの高さを占めるように動的に伸縮します。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。