[解決済み] 幅・高さをピクセル単位からパーセント単位で設定する。

質問

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

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

見た目はこんな感じです。

が欲しい。 順序なしリスト がコンテナ内の残りのスペースを占有するように <div> ヘッダーが <div> は 18px の背が高い。ただ、リストの高さを "の結果として指定する方法がわからないのです。 100% マイナス 18px となります。

この質問はSOの他の文脈でもいくつか見かけましたが、私の特定のケースについて再度質問する価値があると思いました。このような場合、どなたかアドバイスがありますか？

どのように解決するのですか？

を使用することができます。 calc :

height: calc(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);