How to calculate the height of a header in tag?

Question

How do I calculate the height of a <header> tag from a <main> tag so that I can use the calc() function to calculate the rest of the screen space available to span a banner in its place.

HTML:

<body>
  <header>
    <!-- A Navigation Bar of some sorts -->
  </header>
  <main>
    <div class="banner">
      <!-- Some text on the banner -->
    </div>
  </main>
</body>

And CSS:

.banner {
  height: calc(100vh - /* Height of <header> */);
  background-image: url(some image);
  background-position: center;
  background-size: cover;
}

Just an FYI... I'm designing for a project for college and for mobile specifically so this formatting will not span to desktop as I will change the styling for desktop and tablets

You will need JS for that. – The Witness Jul 14 '19 at 13:22 — The Witness, Jul 14 '19 at 13:22
What is your browser? – ℛɑƒæĿᴿᴹᴿ Jul 14 '19 at 13:28 — ℛɑƒæĿᴿᴹᴿ, Jul 14 '19 at 13:28

score 0 · Accepted Answer · answered Jul 14 '19 at 13:30

If you don't have time to learn JavaScript the easiest the thing to do is to give the header a fixed height. Than you can subtract the fixed height from the banner. It's not the most beautiful solution, but it works:

header {
  height: 80px
}

.banner {
  height: calc(100vh - 80px);
  background-image: url(some image);
  background-position: center;
  background-size: cover;
}```

How to calculate the height of a header in tag?

1 Answers1