Div を親の残りの高さに合わせるにはどうすればよいですか?

絶対位置を指定せずに Div が残りの親の高さを占有するようにする方法

はじめに

Web 開発では、 div 要素を使用して、親コンテナの残りの高さを埋めます。これは、さまざまな CSS テクニックを使用して実現でき、ブラウザー間での柔軟性と応答性を確保できます。

テクニック

1. Flexbox

Flexbox を使用すると、flex プロパティを使用してコンテナ内の要素を整列および分散できます。 div が残りの高さを占めるようにするには、コンテナーの表示を flex に設定し、flex-grow: 1 を div.

2 に割り当てます。グリッド

グリッドは、ページ レイアウトに対する構造化されたアプローチを提供します。目標を達成するには、grid-template-rows を使用して単一行のグリッドを設定し、残りのスペースを占有する div に Grid-row: 2 を割り当てます。

3.電卓 (Calc)

calc() サポートが充実しているブラウザの場合、この方法は簡単です。 div の高さを calc(100% - HEIGHT_OF_OTHER_CHILD) に設定するだけです。

4. Overflow

この手法は、オーバーフロー プロパティに依存しています。コンテナのオーバーフローを非表示に設定し、展開する div に height: 100% を割り当てます。

考慮事項

これらの手法は、すべてのブラウザで一貫して動作するとは限らないことに注意してください。互換性を確保するために、常に複数のブラウザーで結果をテストしてください。さらに、意図しない動作を避けるために、親コンテナの高さが適切に定義されていることを確認してください。

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