css - 垂直スタック、中央セクションをできるだけ高くする

Question

わかりましたので、私は非常に単純なスタックを持っています:

---------
|   A   |
---------
|   B   |
---------
|   C   |
---------

との両方が既知の固定された高さAを持っています。Cただし、ウィンドウの高さ (モバイル ビューポート) は不明です。Bできるだけ背が高くなるようにしています。を使用するoverflow-y: autoので、オーバーフローは問題ありません。実際の問題は、それを未知の（しかし計算可能な）値に拡張することです。

を計算することでこれを解決しました$(window).height() - ($(A).height + $(C).height())が、もっと良い方法 (または jQuery プラグイン) があるはずです。

Answer 1

コンテナーに非staticポジショニングがあることを確認してから、B position: absolute;両方のtopとbottomをそれぞれ A と C の高さに設定します。

たとえば、A高さが 20 ピクセルで高さがC40 ピクセルの場合、CSS は次のBようになります。

#b {
    bottom: 40px; /* Height of C */
    left: 0;
    position: absolute;
    right: 0;
    top: 20px; /* Height of A */
}