Keep header 100% height no matter what navbar size

Question

When I have a navbar as seperate div, how can I make the header full height of the screen? When I add 100vh it's too big, when users lands on website he can scroll. I need to add like 95.5vh instead to fit it perfectly, but I do not want to add custom height. How can I make it to be full height all time no matter the size of navbar? Is there something else than vh I could use?

header {
  background: red;
  height: 100vh;
}

body {
  margin: 0;
}

  <div class="navbar">
    <div class="navbar__logo">Brand.</div>
  </div>
  <header>
    Hello
  </header>

score 1 · Accepted Answer · answered Jan 05 '21 at 19:01

1

Using flex, flex-direction and flex-grow does the job well.

Guide to Flexbox would be a good reading to have. Then seach MDN for more detail of each property.

body{
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

header {
  background: red;
  flex-grow: 1;
}

<div class="navbar">
  <div class="navbar__logo">Brand.</div>
</div>
<header>
  Hello
</header>

answered Jan 05 '21 at 19:01

Louys Patrice Bessette

33,375
6
36
64

Thanks, this solved the issue. Can I use flex; 1 instead flex-grow? – Dave Jan 05 '21 at 19:12
Yes... In the flex documentation it says: `This property is a shorthand for the following CSS properties: flex-grow flex-shrink flex-basis` – Louys Patrice Bessette Jan 05 '21 at 19:13
Note that there is the `flex` value for the display property... And the `flex` property... Two different things. lol. There is a lack of naming creativity here hahah – Louys Patrice Bessette Jan 05 '21 at 19:16

Keep header 100% height no matter what navbar size

1 Answers1