Make div fit remaining height

Question

I have the following divs

<div class="top">
   <div class="inner1"></div>
   <div class="inner2"></div>
   <div class="inner3"></div>
</div>

Here's the CSS:

.top { 
    height: 100vh;
}

.div1 {
    min-height: 215px;
    box-sizing: border-box;
    height: 30vh;
}

.div2 { 
    box-sizing: border-box;
    min-height: calc(100vh - 30vh - 265px);
    padding-top: 2.5em;
    margin-top: 0;
    display: table;
}

.div3 {
    min-height: 265px;
    box-sizing: border-box;
    background: white;
    display: table;
    width: 100%;
    font-weight: 700;
    padding-bottom: 42px;
}

I don't want to use calc(100vh - 30vh - 265px) to set the min-height of div 2. How can I have it so that it takes the remaining height (meaning div2 height = 100vh - div1 height - div2 height.

I'm guessing flex could be useful here, but I'm not quite sure how to use it. Any help would be greatly appreciated.

Thanks?

Before marking this as a duplicate, please note: I tried using flex and it doesn't work well in IE11.

It should work fine in IE11. Can you post an example? The only problem would be IE10 where you would have to use -ms- prefix. — Kyle Hawk, Apr 26 '16 at 20:22
looks like a duplicate of http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486 if you are willing to use flex — G-Cyrillus, Apr 26 '16 at 20:33
Please [don't duplicate your questions](https://stackoverflow.com/questions/36874066/div-takes-remaining-height) - if your question is closed as a dup, asking it again by copy+paste is not a good way around it. — halfer, Apr 26 '16 at 22:05

score 0 · Answer 1 · answered Apr 26 '16 at 20:36

Don't know if it's the best idea, but to overcome cross browser limitations, I usually use javascript to recalculate that. I write javascript function and then fire it on window resize and on load.

// some jQuery
function adjustHeight() {
var fullHeight = $(window).height();

var neededHeight = fullHeight - fullHeight*0.3 - 263;

$('.div2').css('min-height', neededHeight + 'px');

}


$(document).ready(function(){ adjustHeight(); });

score 0 · Answer 2 · answered Apr 26 '16 at 20:42

beside flex, display:table properties could help as well for older browser.

in this case height turns to be min-height

.top {
  height: 100vh;
  display: table;
  width: 100%;
}
.top>div {
  display: table-row;
}
.inner1 {
  min-height: 215px;/* becomes useless */
  box-sizing: border-box;
  height: 30vh;
  background: tomato;
}
.inner2 {
  box-sizing: border-box;
  padding-top: 2.5em;/* i'll get squeezed here */
  margin-top: 0;/* useless, border-spacing is to be used */
  background: turquoise;
}
.inner3 {
  height: 265px;
  box-sizing: border-box;
  background: yellow;
  display: table;
  width: 100%;
  font-weight: 700;
  padding-bottom: 42px;/* ? :) */
}

<div class="top">
  <div class="inner1">1</div>
  <div class="inner2">run me in full page to see how i behave :)</div>
  <div class="inner3">3</div>
</div>

Make div fit remaining height

2 Answers2