以前、スタック オーバーフローについて次の質問をしました: サイドバーにスクロール バーを作成する
ここでは基本的にサイドバーを作成しようとしています。そのサイドバーには、サイズ不明のヘッダーとサイズ不明のフッターが必要です。サイドバーのフッターとヘッダーの間には、長いリストを含むスクロール div が必要です。上記の質問では、css を使用してヘッダーとフッターの間のスペースをスクロール div で埋める方法を尋ねていました。
「セレクターが別の要素の高さをどのように知ることができますか? それは CSS の目的ではありません。」
今私の質問は、これが css でできないのはなぜですか? css では、2 つの div を必要なだけスペースを占有するように設定し、その間の div で残りのスペースを埋めることができないのはなぜですか? これは、解決する必要のある一般的な問題ではありませんか?
CSSでそれを行うことができますが、期待するほどサポートされていません. CSScalc関数を使用すると、説明した方法で動的な値を割り当てることができます。
overflow: hidden#sidebar から を削除し、#main の calc 関数で高さを割り当てます。次のようになります。
height: calc(100% - 30px);
これの最大の欠点はcalc、すべてのブラウザーでサポートされているわけではないことです。最も重要なのは、現在の安定版の Chrome です。ただし、Chrome 19 では webkit プレフィックスで利用できます (すぐに利用可能になる予定です)。同様に、Firefox では moz プレフィックスの下にあります。IE9 でもサポートされています。
はい、これは一般的な問題であり、私が知る限り、これは CSS の将来のバージョンの仕様に含まれています。これがなぜなのか、私には言えませんでした。
奇妙なことに、テーブルはこれを行う方法を知っているため ( http://jsfiddle.net/45YJE/ )、これが div で機能しない技術的な理由はおそらくないでしょう。あなたはそれと一緒に暮らすことを学ばなければならないでしょう。
これはどうですか？私はそれがすべてのブラウザでも動作すると確信しています。