How to make div occupy remaining height?

Question

I have this problem, I have two divs:

<         


        
      

Answer 1

You could use calc function to calculate remaining height for 2nd div.

*{
  box-sizing: border-box;
}

#div1{
  height: 50px;
  background: skyblue;
}

#div2{
  height: calc(100vh - 50px);
  background: blue;
}