Div that occupies the entire height of the remaining screen

You can do it using javascript , with its property screen.heigth , which takes the total height of the screen in which you are and you add it by means of a variable. It would be something like this:

<script type="text/javascript">

$(document).ready(function(){

      var height = $(window).height();

      $('#div2').height(height);
});

</script>

This way it will take the height of any screen in which your page or application is displayed

place the display:flex in your body and add flex-direction:column to take 100% of the length vertically

Also you had a syntax error in the height and margin in the html selector, body

As follows, it's the result you expect

html, body{
  height:100%;
  margin:0;
  display: flex;
  flex-direction: column;
}
#div1{
  height: 80px;
  width: 100%;
  background-color: red;
  justify-content: center;
  align-content: center;
}

#div2{
  height:100%;
  width: 100%;
  background-color: green;
}

see here the example

To achieve the desired effect, you can declare the body as display: flex and occupy the top of the screen, in addition to telling it that its address is in column flex-direction: column , at the div you want it to occupy the rest of the space we declare flex: 1 that is equivalent to flex-grow: 1

html, body{
  display: flex;
  flex-direction: column;
  height:100vh;
  margin 0;
}
#div1{
  height:80px;
  width: 100%;
  background-color: red;
  
  display:flex;
  justify-content: center;
  align-items: center;
}

#div2{
  flex: 1;
  background-color: green;
}

<div id="div1"> Contenido del div 1 </div>

<div id="div2"> Contenido del div 2. Este div quiero que ocupe hasta el final de la pantalla de manera vertical. </div>

Add to class #div2 position: fixed; this should work, if you tell me something.