CODEWITHSUNDEEP
htmlcss
Ismail Labbi
Ismail Labbi

Reputation: 11

How can div take the rest of page height

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>

Upvotes: 1

Views: 138

Answers (2)

BrtSkr
BrtSkr

Reputation: 27

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

Upvotes: 1

Tatan
Tatan

Reputation: 21

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.

Upvotes: 1

Related Questions