CSS `calc()` を使用して親コンテナに基づいて要素の高さを動的に管理するにはどうすればよいですか?

CSS パーセンテージと減算による動的な高さ管理

一貫性があり、整然とした Web デザインを作成するには、多くの場合、再利用可能な CSS クラスの実装が必要です。一般的な課題の 1 つは、コンテナーの動的な性質を維持しながら、コンテナーの標準化された高さを確立することです。

ここで説明するシナリオでは、コンテナー

ページ上の位置に応じて高さが異なります。このコンテナ内にはヘッダー

があります。および順序なしリスト

。目標は、
を取得することです。ヘッダーの固定高さ 18 ピクセルを考慮した後、残りのスペースを占有します。

これを実現するには、CSS calc() 関数を活用できます。

height: calc(100% - 18px);

これはブラウザに高さを計算するように指示します。

のコンテナの高さの 100% から 18 ピクセルを引いたもの。この動的なアプローチにより、
が確実に実行されます。コンテナのサイズに関係なく、常に残りのスペースを占有します。

古いブラウザは CSS3 calc() 関数をサポートしていない可能性があることに注意することが重要です。互換性を確保するには、関数のベンダー固有バージョンの実装も検討してください。

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

calc() 関数を利用することで、動的シナリオで高さを効果的に管理し、一貫性と適応性のあるレイアウトを作成できます。

以上がCSS `calc()` を使用して親コンテナに基づいて要素の高さを動的に管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。