How can div take the rest of page height-CodePudding

The header has a dynamic height, how can the main take up the rest of the page height?

header {
  margin: auto;
  width: 50%;
  height: auto;
}

h1 {
  text-align: center;
}

main {
  background-color: aqua;
}

<header>
  <h1>Add new task in your list</h1>
  <app-add-to-do-list></app-add-to-do-list>
</header>
<main>
</main>

CodePudding user response：

Para ello, puedes usar en el width y height de cada uno la propiedad vh que es viewport height y definirle un alto a cada uno de ellos, ejemplo:

header{
  height: 30vh;
}

main{
  height: 70vh;
}

Además, puedes agregar un overflow-scroll también.

CodePudding user response：

When you add height auto it only stretches to the size of it's content. If you would want the container to take some of the free space you have there use min-height: 20rem;

Here I have created codepen with examples: https://codepen.io/brtskr-the-animator/pen/JjMQRbd

body{
min-height: 20rem;
  background: #222;
  color: white;
}
*{
  margin: 0 0 2rem 0;
}
header{
height: auto;
border: 1px solid green;
}
.ex1{
  height: 5rem;
  border: 1px solid yellow;
}
.ex2{
  min-height: 5rem;
 border: 1px solid blue;
  font-size: 6rem;
}
.ex3{
  height: auto;
 border: 1px solid pink;
  font-size: 10rem;
}