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

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

Susan Sarandon

リリース： 2024-12-17 16:19:10

オリジナル

993 人が閲覧しました

How Can I Set a Container's Height to a Percentage Minus a Fixed Pixel Value in CSS?

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

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

コンテナ

があります。ヘッダー

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

これを実現するには、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 サイトの他の関連記事を参照してください。