Issue
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
Solution
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;
}```
Answered By - CarbonvanE Answer Checked By - Robin (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.