CSS でコンテナの高さをパーセンテージから固定ピクセル値を引いた値に設定するにはどうすればよいですか?

コンテナの高さをパーセンテージから固定値を引いた値として設定する

Web サイト全体で一貫性を維持し、不必要なスタイルを減らすには、再利用可能な CSS クラスが有益です。ただし、特定の要素を標準化する場合、コンテナ要素の高さをその親コン​​テナから特定のピクセル値を引いたパーセンテージとして設定するなど、課題が発生する可能性があります。

コンテナ

があります。ヘッダー

付きその中には順序なしリスト (

) があります。ヘッダーの高さは 18px に固定されていますが、リストの高さはコンテナー内の残りのスペースを埋めるように動的に調整する必要があります。この問題は、リストの高さを「100% マイナス 18 ピクセル」として指定する必要がある場合に発生します。

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

height: calc(100% - 18px);

この関数により、 CSS 内で数学的な計算を実行できます。この場合、リストの高さは 100% から 18px 減算されます。

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);

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