How To Get Top Div To Fill Remaining Height After Bottom Div Rendered? (without Flexbox)

Three divs each above the other, within a parent container. Top div is fixed height. Bottom div has content that takes up an unknown amount of vertical space but needs all content

Solution 1:

For old browser , where flex cannot be used , display:tablecan be a fall back but layout will be able to grow past window's height where content is too long to be shown at once.

A CSS only mix using flex and table as a fallback where flex is not supported: https://codepen.io/gc-nomade/pen/BdWXpp

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

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

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