CSS で要素の高さまたは幅をパーセンテージから固定ピクセル値を引いた値として設定するにはどうすればよいですか?

パーセンテージからピクセルを引いた値として幅/高さを設定する

CSS での一般的な課題の 1 つは、要素の高さまたは幅をコンテナーから固定値を引いたパーセンテージとして指定することです。次のシナリオを考えてみましょう。

コンテナ

があります。高さが不明で、ヘッダー

が付いています。その中で。ヘッダーの下では、ヘッダーの高さが 18 ピクセルであることがわかっている、順序なしリストが残りのスペースを占めるようにします。リストの高さを「100% - 18px」として動的に指定するにはどうすればよいですか?

解決策

解決策は、calc() 関数を利用することです。

height: calc(100% - 18px);

これ式は、既知の固定値 (18px) を減算して高さを計算します。これにより、リストが拡張されて、残りのスペースが埋まるようになります。コンテナ。

ブラウザの互換性

calc() は広くサポートされていますが、一部のレガシー ブラウザではベンダー固有のバージョンが必要です。

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

完全なブラウザ間の互換性については、次のことを考慮してください。すべてのバージョンを最後に標準構文とともに使用します:

/* 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 サイトの他の関連記事を参照してください。