下のdivをレンダリングした後、残りの高さを埋めるために上のdivを取得する方法は？ （フレックスボックスなし）

Question

親コンテナ内にそれぞれ3つのdivがあります。上のdivは固定された高さです。ボトムdivには、未知の量の垂直スペースを占めるが、その中に表示されるすべてのコンテンツが必要なコンテンツがあります。上のdivは残りの縦のスペースを埋めるはずです。私は最近、っぽいレガシーブラウザ（例えば、IE9 +）&モバイルブラウザ（例えばアンドロイド4.4以降）、そのフレキシボックスベースのレイアウトをサポートするために必要なすべての

<div id="container"> // 100% of visible window height but should not overflow 
    <div id="top"> // Fixed height 
    </div> 
    <div id="middle"> // Use remaining vertical space 
    </div> 
    <div id="bottom"> // Unknown height but contents should all be shown 
    </div> 
</div> 

が出ています。私がしようとする（jQueryのを使用して）Javascriptを試してみました

middle div height = container height - (top div height + bottom div height) 

を設定しますが、ブラウザがページの間に下のdivの高さを誤報告されたいくつかの理由で（勝利7の最新クローム）レンダリングので、結果が間違って出てきました。私は可能な限りJSを避けたい（ソリューションがあれば開いている）。

できるだけ多くのデスクトップおよびモバイルブラウザをサポートする必要があります。 flexを使用することができない古いブラウザについては、 おかげ

Answer 1

、display:tableはフォールバックすることができますが、レイアウトは、コンテンツが一度に表示されるには長すぎる過去のウィンドウの高さに成長することができるようになります。 ）display:table/table-rowほぼすべてのブラウザのために（IE8の作品のみCSS（と次にスニペット、以下https://codepen.io/gc-nomade/pen/BdWXpp

：

A CSSだけでflexがサポートされていないフォールバックとしてflexとtableを使って混ぜます

html, 
 
body, 
 
#container { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    display: table; 
 
    background: turquoise; 
 
} 
 

 
#container>div { 
 
    display: table-row; 
 
} 
 

 
.buffer { 
 
    display: table-cell; 
 
    /* display is optionnal but element is required in HTML to keep layout as a single column and allow vertical-align to content*/ 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
#top { 
 
    background: orange; 
 
    height: 100px; 
 
} 
 

 
#middle { 
 
    height: 100%; 
 
} 
 

 
#bottom { 
 
    background: tomato; 
 
}

<div id="container"> 
 
    <div id="top"> 
 
    <div class="buffer">top 100px, test me full page and in any medias 
 
    </div> 
 
    </div> 
 
    <div id="middle"> 
 
    <div class="buffer">Use remaining vertical space 
 
    </div> 
 
    </div> 
 
    <div id="bottom"> 
 
    <div class="buffer">Unknown height<br/> that fits <br/>to content to hold 
 
    </div> 
 
    </div> 
 
</div>