CSS を使用して要素の高さを 100% から固定ピクセル値を引いた値に設定するにはどうすればよいですか?

マイナスピクセルの割合として幅/高さを設定する: ステップバイステップガイド

Web 開発では、一貫性を維持し、コードの乱雑さを最小限に抑えることが不可欠です。再利用可能なコンポーネントの CSS クラスを定義する場合、さまざまなコンテンツに基づいて高さをカスタマイズするのは困難な場合があります。この記事では、ヘッダーの固定高さを考慮した上で、コンテナ div の残りのスペースを占めるように順序なしリスト (ul) の高さを設定する一般的なシナリオについて説明します。

これを実現するために、CSS はcalc()関数。この関数を使用すると、CSS ステートメントで計算を実行できます。この場合、次の構文を使用できます:

height: calc(100% - 18px);

これにより、UL の高さが親の 100% から 18px を引いた値に設定されます。 18 ピクセルはヘッダー div の固定高さに対応します。

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

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

CSS に calc() 関数を組み込むことで、以下に基づいて UL の高さを効率的に標準化できます。 Web サイトの動的コンテンツ。この手法により、CSS コードの一貫性と柔軟性が向上します。

以上がCSS を使用して要素の高さを 100% から固定ピクセル値を引いた値に設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。