コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > CSSチュートリアル > 別の Div の固定高さを維持しながら、Div 要素が残りのページの高さを占めるようにするにはどうすればよいですか?

別の Div の固定高さを維持しながら、Div 要素が残りのページの高さを占めるようにするにはどうすればよいですか?

Linda Hamilton

リリース： 2024-11-08 08:53:02

オリジナル

777 人が閲覧しました

How to Make a Div Element Occupy Remaining Page Height While Maintaining a Fixed Height for Another Div?

Div 要素による一貫した高さの分布の維持

複数の div 要素間での高さの比例分布の確保は、高度な CSS テクニックによって実現できます。次のシナリオを考えてみましょう:

</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

ログイン後にコピー

目標は、div1 を許可しながら、div2 がページの残りの高さを占めるようにすることです。

解決策: 絶対配置

次の CSS スタイルを使用すると、目的の動作を実現できます。

< p>
<div>

<div>

ログイン後にコピー

div1{

width: 100%;
height: 50px;
background-color:red;/*Development Only*/

ログイン後にコピー

}

div2{

width: 100%;
position: absolute;
top: 50px;
bottom: 0;
background-color:blue;/*Development Only*/

ログイン後にコピー

}
<広報e><div>

</div></p>

ログイン後にコピー

説明

div2 に絶対位置を適用すると、ページの通常のフローから削除され、代わりに指定された上部と下部の値に基づいて配置されます。 top プロパティは div1 の上端からの距離を設定し、bottom プロパティは要素がページの下部まで拡張されることを保証します。 div2 の幅は、ページの幅全体にわたるように 100% に設定されます。

この手法を使用すると、div1 の高さとページ全体の高さに基づいて div2 の高さを動的に調整でき、一貫した高さを確保できます。レスポンシブなレイアウト。

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

ソース：php.cn

前の記事：ツールチップを使用せずに画像ホバーにテキストを表示するにはどうすればよいですか? 次の記事：なぜ `querySelector` は `.weekdays` クラスの最初の要素だけを選択するのでしょうか?

このウェブサイトの声明

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

著者別の最新記事