How to get the top div to fill the remaining height after displaying the bottom div? (without flexbox)

Question

Three divs each above the other, in the parent container. The top div is a fixed height. The bottom div has content that takes up an unknown amount of vertical space, but all content is required to display it. The top div should fill the remaining vertical space. Everyone

<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> 

I need to support the latest browsers (e.g. IE9 +) and mobile browsers (e.g. Android 4.4+), so flexbox layouts are missing. I tried Javascript (using jQuery) to try to install

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

but for some reason, the browser incorrectly reported the lower height of the div when rendering the page (the last Chrome on Win 7), so the result was incorrect. And I would like to avoid JS if possible (open if the solution works).

It is necessary to support as many desktop and mobile browsers as possible. Thanks

Answer 1

For an old browser where flex cannot be used, display:table may go back , but the layout will be able to increase the height of the window where the content is too long to be displayed immediately.

CSS only mixes using flex and table as a backup, where flex not supported: https://codepen.io/gc-nomade/pen/BdWXpp

Below, the snippet with display:table / table-row CSS only (which works for almost any browser (IE8 onwards)

 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>