CSS - div height calculation without "calc"

Question

In my website, I am using two divs that should have their height like in this picture.

So, there is a div with height:90px; that is aligned to the bottom of the window, now what can I do if I want the 2nd div (red) to "fill" the rest of the window? Red div should have the height of the window minus the height of the blue div but something like calc(100vh - 90px) wouldn't work, right?

Thanks!

Answer 1

Actually height: calc(100vh - 90px); does work

html,
body {
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
footer {
  height: 90px;
  background: blue;
}
main {
  background: red;
  height: calc(100vh - 90px);
}

<main></main>
<footer></footer>

However, it's not entirely clear how you want this to react if the content would normally cause vertical scrolling. Then this is not the answer, probably.

Alternative solution with flex-box

html,
body {
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap:no-wrap;
  min-height:100vh;
}
main {
  background: red;
  flex:1;
}

footer {
  flex-basis:90px;
  flex-shrink:0;
  background: rgba(0, 0, 255, 1);
}

<div class="wrap">
  <main>
    <div class="content"></div>
  </main>
  <footer>
  </footer>
</div>