Vertically center a box inside a container until it reach a limit - html

Question

Here's a diagram:
I'm trying to make a web page that have a banner (the grey box) with a height of 80vh (when it's possible).
This banner contains a div with a text inside (the blue box) that must be vertically centered inside this banner.
In addition, I have a navigation menu with a height of 100px (the pink line), this menu is positioned in absolute at the top of the banner.
How can I obtain a layout in which the blue box is vertically centered but it cannot cross the navigation menu (pink line) and in which the banner (grey box) cannot be smaller than the height of the blue box + the height of the navigation menu?
I wish I could obtain this result in CSS only.
Here's a code with the 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>Home</li>
<li>Products</li>
<li>Contact</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>

Answer 1

Not sure if it's possible to have all the requirement with CSS only so here is a try with almost all the requirement (missing only the last one). I will simply consider position:sticky
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;
/* the trick start here */
position:sticky;
top:100px;
margin:-100px auto;
}
<section class="banner">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</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>
You can visually hack the last requirement like below:
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") fixed;
height: 80vh;
min-height: 100px; /* + the box inside :( */
}
nav {
position: absolute;
top: 0;
width: 100%;
z-index:2;
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;
/* the trick start here */
position:sticky;
top:100px;
margin:-100px auto;
transform-style:preserve-3d;
}
.content::before {
content:"";
position:absolute;
bottom:-2px;
top:0;
left:-50vw;
right:-50vw;
background: url("https://picsum.photos/id/1015/1920/1080") fixed;
transform:translateZ(-1px);
}
body {
overflow-x:hidden;
}
<section class="banner">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</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>