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

要素のサイズを最適化するためのパーセンテージベースの高さマイナスピクセル

再利用可能な CSS クラスを通じて Web サイトの一貫性を高め、コードの乱雑さを軽減することは、賞賛に値する取り組みです。液体の内容物を含むコンテナを扱う場合、特定の要素の高さを設定する方法を決定する必要があります。この記事では、一般的なシナリオについて説明します。

ヘッダー div と順序なしリストを持つコンテナー div を考えてみましょう。目標は、ヘッダーの固定高さ 18 ピクセルを除いた、コンテナ内の残りの高さをリストに割り当てることです。

これを実現するために、CSS は、スタイル ルール内で動的計算を可能にする calc() 関数を提供します。

height: calc(100% - 18px);

この式は、18px ヘッダーを除いて、コンテナの 100% に等しい高さをリストに割り当てます。

ただし、一部の古いブラウザでは 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() 関数を使用してパーセンテージと固定値を効果的に組み合わせることで、要素のサイズを微調整し、一貫性を確保し、全体的なユーザーの機能を向上させることができます。あなたのウェブサイトでの体験。

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