HTML Element Style How to - 2nd div to take remaining height of the page

Question

We would like to know how to 2nd div to take remaining height of the page.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
* {<!--from   w  ww .  j a  v a  2  s  . com-->
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  display: table;
}

div {
  width: 100%;
  background: yellow;
  display: table-row;
}

div+div {
  background: pink;
  height: 100%;
}
</style>
</head>
<body>
  <div>hello hello hello hello hello hello hello hello hello hello
    hello hello hello hello hello hello hello hello hello hello hello
    hello hello hello hello hello hello hello hello hello hello hello
    hello hello hello hello hello hello hello hello hellohello hello hello
    hello hello hello hello hello hello hello hello hello hello hello
    hello hello hello hello hello hello hello hello hello hello hello
    hello hello hello hello hello hello</div>
  <div>there</div>
</body>
</html>

The code above is rendered as follows: