☰

幅/高さをパーセントからピクセルを引いた値で設定する 質問する

tag-icon • tag-icon css height pixel
幅/高さをパーセントからピクセルを引いた値で設定する 質問する

サイトの一貫性を高め、乱雑さを減らすために、再利用可能な CSS クラスをいくつか作成しようとしていますが、頻繁に使用する 1 つのものを標準化しようとして行き詰まっています。

<div>高さを設定したくないコンテナーがあります(サイト上の場所によって高さが異なるため)。その中にはヘッダーがあり<div>、その後にCSS が適用された順序なしの項目リストがあります。

次のようになります:

ウィジェット

ヘッダーの高さがわかっているので、順序なしリストがコンテナー内の残りのスペースを占めるようにしたいのですが、リストの高さを「マイナスの結果」として指定する方法がわかりません。<div><div>18px100%18px

SO の他のいくつかのコンテキストでもこの質問を見たことがありますが、私の特定のケースについてはもう一度質問する価値があると思いました。この状況についてアドバイスをいただける方はいらっしゃいますか?

ベストアンサー1

以下を使用できますcalc:

height: calc(100% - 18px);

一部の古いブラウザは CSS3calc()機能をサポートしていないため、ベンダー固有のバージョンの機能を実装する必要がある場合があることに注意してください。

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

おすすめ記事