絶対的な配置を行わずに、子 Div が親の残りの高さを占めるようにするにはどうすればよいですか?

絶対配置を行わずに Div が残りの親の高さを占有するようにする

はじめに

フロントエンド開発では、コンテナ div 内の要素にスペースを割り当てることが一般的です。チャレンジ。 1 つのシナリオでは、特に親の高さはわかっているが子の高さがわからない場合に、子 div が親の残りの高さを占めるようにすることが含まれます。この記事では、絶対配置に頼らずにこれを実現する方法について説明します。

CSS テクニックの活用

• グリッド レイアウト: Grid-template-rows プロパティをコンテナに単一の値 (例: 100px) を指定すると、子 div が残りのスペースを自動的に埋めます。
• Flexbox: コンテナーで display: flex および flex-direction: 列スタイルを使用して、子 div の flex-grow プロパティを 1 に設定します。これにより、子に次のことが効果的に指示されます。残りのスペースを拡張して占有します。
• 計算機ベースのアプローチ:最初の子の高さがわかっている場合、2 番目の子の高さは CSS の calc(100% - first_child_height) を使用して計算できます。
• オーバーフロー プロパティ: コンテナーのオーバーフロー プロパティが非表示に設定されている場合、子 div をコンテナの寸法に合わせて効果的にトリミングします。子 div の高さを 100% に設定すると、利用可能なスペースを埋めるように拡張されます。

サンプル コード

詳細な例については、提供されている CSS および HTML スニペットを参照してください。これらのテクニック。 max-content プロパティはサイズ変更のオプションとしても考慮され、場合によっては高さを固定する必要がなくなることに注意してください。

以上が絶対的な配置を行わずに、子 Div が親の残りの高さを占めるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。