Check out this diagram:
https://i.sstatic.net/tGZAR.png
I'm working on creating a web page with a banner (the grey box) that has a height of 80vh, if possible.
This banner includes a div with text inside (the blue box) that needs to be vertically centered within the banner.
Additionally, there's a navigation menu with a height of 100px (the pink line), positioned absolutely at the top of the banner.
How can I achieve a layout where the blue box is vertically centered but doesn't overlap with the navigation menu (pink line), and where the banner (grey box) cannot be smaller than the total height of the blue box and the navigation menu?
I'd like to accomplish this result using only CSS.
Take a look at this code snippet which provides a partial layout:
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url("https://picsum.photos/id/1015/1920/1080");
height: 80vh;
min-height: 100px; /* + the box inside :( */
}
nav {
position: absolute;
top: 0;
width: 100%;
border-bottom: solid 4px #f5989d;
height: 100px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
.content {
font-size: 18px;
color: white;
text-align: center;
max-width: 400px;
padding: 20px;
background: #6dcff6dd;
border: solid 1px black;
}<section class="banner">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</section>