How can div take the rest of page height

Question

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>

Does this answer your question? [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — segFault, Apr 26 '22 at 01:51

score 1 · Answer 1 · edited Apr 26 '22 at 10:10

1

To do this, you can use the vh property, which is viewport height, in the width and height of each one and define a height for each of them, example:

header{
  height: 30vh;
}

main{
  height: 70vh;
}

Also, you can add an overflow-scroll as well.

edited Apr 26 '22 at 10:10

Agent K

359
4
17

answered Apr 26 '22 at 02:01

Tatan

21
1

1

@Tatan Please written in English, Question and Answers on SO, must be in English. – Sunderam Dubey Apr 26 '22 at 03:05
@Tatan the problem with this solution that we should fix height of header , but in my case the header has dynamic height can be less or more expected – Ismail Labbi Apr 27 '22 at 01:07

BrtSkr · Answer 2 · 2022-04-26T23:14:27.673

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 to add 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;
}

How can div take the rest of page height

2 Answers2