CSS Flexbox - Sticky Top and Side navbar, with scroll - html

Question

I would like:
A 50px tall header with a sticky nav below.
Side nav sticky at same point as top nav.
Both navs retain scroll ability.
Non-sticky footer that stays at the very bottom.
I was able to get one of the following to work at a time:
Scrolling to work with fixed header & top nav
Sticky top nav to work with non-fixed main elements
I need to get them both to work simultaneously.
HTML/CSS only solution preferred.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* ! BODY / HTML */
html,
body {
background-color: red;
}
/* ! CONTAINER */
.container {
display: flex;
flex-flow: column wrap;
height: 100vh;
min-height: 100vh;
background-color: #ecf0f1;
}
/* ! HEADER/FOOTER */
header,
footer {
font-size: 50px;
color: white;
background-color: orange;
}
/* ! TOP NAV */
.top_navbar {
display: flex;
flex-flow: row nowrap;
/*flex: 0 0 auto;*/
position: sticky;
top: 0px;
align-items: center;
background-color: yellow;
}
.top_navbar a {
color: white;
}
#nt_left {
background-color: green;
flex-grow: 1;
}
#nt_center {
background-color: blue;
}
#nt_right {
background-color: indigo;
}
/* ! MAIN CONTENT */
.main_body {
display: flex;
flex-flow: row nowrap;
overflow: auto;
}
#ns_left {
flex: 0 0;
flex-basis: 300px;
top: 50px;
background-color: violet;
font-size: 18px;
}
#main {
flex: 1 0;
background-color: red;
font-size: 26px;
}
<header>THIS IS A HEADER</header>
<div class="container">
<div class="top_navbar" id="top_navbar">
<div class="nav_top" id="nt_left">
<span class="material-symbols-outlined"> sentiment_satisfied </span>
</div>
<div class="nav_top" id="nt_right">
TOP LINK 1
TOP LINK 2
TOP LINK 3
</div>
</div>
<div class="main_body">
<aside class="sidebar" id="ns_left">
<h3>sidebar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item ...</li>
</ul>
</aside>
<article class="article" id="main">
<h3>article</h3>
<p>
Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
</p>
</article>
</div>
</div>
<footer>THIS IS A FOOTER</footer>

Answer 1

My best attempt, move <aside> into .top_navbar and use position:absolute to make the illusion.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root {
--aside-width: 150px;
--top-navbar-height: 30px;
}
/* ! BODY / HTML */
html,
body {
background-color: red;
}
/* ! CONTAINER */
.container {
display: flex;
flex-flow: column nowrap;
_min-height: 100vh; /* this line should be remove to become a true responsive site, here just demo */
background-color: #ecf0f1;
}
/* ! HEADER/FOOTER */
header,
footer {
font-size: 50px;
color: white;
background-color: orange;
position: relative;
}
/* ! TOP NAV */
.top_navbar {
display: flex;
flex-flow: row nowrap;
position: sticky;
top: 0px;
align-items: center;
background-color: yellow;
height: var(--top-navbar-height);
}
.top_navbar a {
color: white;
}
#nt_left {
background-color: green;
flex-grow: 1;
}
#nt_center {
background-color: blue;
}
#nt_right {
background-color: indigo;
}
/* ! MAIN CONTENT */
.main_body {
padding-left: var(--aside-width);
}
#ns_left {
width: var(--aside-width);
background-color: violet;
font-size: 18px;
position: absolute;
top: 0;
margin-top: var(--top-navbar-height);
max-height: 100vh;
overflow: auto;
padding-bottom: calc(var(--top-navbar-height) + 70px);
}
.article1 {
background-color: red;
font-size: 26px;
}
.article2 {
background-color: blue;
font-size: 26px;
}
<header>THIS IS A HEADER</header>
<div class="container">
<div class="top_navbar" id="top_navbar">
<div class="nav_top" id="nt_left">
<span class="material-symbols-outlined"> sentiment_satisfied </span>
</div>
<div class="nav_top" id="nt_right">
TOP LINK 1
TOP LINK 2
TOP LINK 3
</div>
<aside class="sidebar" id="ns_left">
<h3>sidebar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item last</li>
</ul>
</aside>
</div>
<div class="main_body">
<article class="article1" id="main1">
<h3>article</h3>
<p>
Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
</p>
</article>
<article class="article2" id="main2">
<h3>article</h3>
<p>
Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
</p>
</article>
</div>
</div>
<footer>THIS IS A FOOTER</footer>

Answer 2

Well, here's my crappy attempt:
* {
box-sizing: border-box;
}
:root {
--aside-width: 300px;
--aside-height: 250px;
}
html,
body,
.container {
height: 100%;
}
body {
margin: 0;
background-color: red;
}
header,
footer {
font-size: 50px;
color: white;
background-color: orange;
}
section {
position: relative;
}
nav {
display: grid;
grid-template-columns: var(--aside-width) 1fr;
grid-template-areas: 'nav-left nav-right' 'aside .';
position: sticky;
top: 0;
background-color: transparent;
}
nav a {
color: white;
}
aside {
grid-area: 'aside';
width: var(--aside-width);
height: var(--aside-height);
background-color: violet;
font-size: 18px;
}
main {
display: flex;
flex-flow: row nowrap;
}
.article-main {
padding: 1em;
padding-inline-start: calc(var(--aside-width) + 1em);
background-color: red;
font-size: 26px;
}
.nav-left {
grid-area: 'nav-left';
background-color: green;
}
.nav-right {
grid-area: 'nav-right';
background-color: indigo;
}
<header>THIS IS A HEADER</header>
<section>
<nav>
<div class="nav-left">
<span class="material-symbols-outlined"> sentiment_satisfied </span>
</div>
<div class="nav-right">
TOP LINK 1
TOP LINK 2
TOP LINK 3
</div>
<aside>
<h3>sidebar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item ...</li>
</ul>
</aside>
</nav>
<main>
<article class="article-main">
<h3>article</h3>
<p>
Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over
cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO
copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest. Williamsburg neutra tilde umami vice mustache master cleanse green juice kale
chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie, church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette
DIY mixtape. Gastropub leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO copper mug coloring book tattooed waistcoat. Dreamcatcher plaid literally
kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
</p>
</article>
</main>
</section>
<footer>THIS IS A FOOTER</footer>

Answer 3

I don't know how I did it, but I was able to get everything accomplished. I think a key factor is remembering that nested flexboxes do not account for the height of sibling(?) flexboxes. So when trying to give the sidebar (aside) a height of 100vh, it was doing just that, but but not accounting for the height of the header & top navbar. I solved that with a calc: height: calc(100vh - (var(--top-navbar-height) + var(--header-height)));
There were some other issues I was having, but managed to work through most of them. The only thing left is to adjust the height of the sidebar (aside) when scrolling up. Because the header disappears, it leaves a whitespace until the footer is displayed. I'm assuming I'll have to use JavaScript to solve that? If anyone has an answer for that, it'd be awesome!
Here is the complete code in case anyone wants a sample:
:root {
--header-height: 50px;
--footer-height: 50px;
--top-navbar-height: 30px;
--aside-width: 250px;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* ! BODY / HTML */
html,
body {
background-color: red;
}
/* ! PAGE CONTAINER */
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #ecf0f1;
}
/* ! HEADER/FOOTER */
header,
footer {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
height: var(--header-height);
font-size: 50px;
color: white;
background-color: orange;
}
footer {
height: var(--footer-height);
font-size: 25px;
color: white;
background-color: orange;
left: 0;
bottom: 0;
margin-top: auto;
}
/* ! NAVBAR & MAIN FLEXBOX */
.main {
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
.navbar {
display: flex;
flex-direction: row;
flex: 0 0 auto;
position: sticky;
top: 0;
align-items: center;
padding: 0 10px 0 10px;
height: var(--top-navbar-height);
font-size: 22px;
background-color: yellow;
}
/* ! NAVBAR STYLE */
#nt_left {
flex-grow: 1;
}
#nt_right a {
margin: 10px;
}
/* ! SIDENAV STYLE */
aside {
display: flex;
flex-direction: column;
flex: 0 0 auto;
top: var(--top-navbar-height);
width: var(--aside-width);
height: calc(100vh - (var(--top-navbar-height) + var(--header-height)));
position: sticky;
overflow-y: auto;
padding: 0 10px 0 10px;
background-color: green;
font-size: 18px;
}
/* ! ARTICLE STYLE */
article {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 0 10px 0 10px;
background-color: blue;
font-size: 18px;
}
<body>
<div class="container">
<header>THIS IS A HEADER</header>
<div class="navbar">
<div class="nav_top" id="nt_left">
<span class="material-symbols-outlined"> sentiment_satisfied </span>
</div>
<div class="nav_top" id="nt_right">
TOP LINK 1
TOP LINK 2
TOP LINK 3
</div>
</div>
<div class="main">
<aside>
<h3>sidebar</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item ...</li>
<li>Item last</li>
</ul>
</aside>
<article>
<h3>Hipster Ipsum</h3>
<p>
Williamsburg neutra tilde umami vice mustache master cleanse green juice kale chips godard subway tile lomo. Messenger bag single-origin coffee ascot poke lyft readymade fixie,
church-key gastropub meditation. Af gochujang la croix, readymade blog pour-over cronut paleo offal heirloom. Kale chips +1 polaroid truffaut raclette DIY mixtape. Gastropub
leggings meggings tbh hot chicken slow-carb YOLO mustache lyft VHS deep v fanny pack hell of. Echo park sustainable food truck jean shorts, prism XOXO copper mug coloring book
tattooed waistcoat. Dreamcatcher plaid literally kinfolk bodega boys vaporware before they sold out pop-up fashion axe fit hammock pinterest.
</p>
<br />
<p>
Pok pok deep v schlitz, kickstarter bushwick godard sustainable umami fit small batch. +1 master cleanse offal bushwick photo booth green juice. Copper mug thundercats
stumptown, prism 90's tonx letterpress cred irony. Bruh messenger bag same organic meggings bushwick bespoke ascot sus franzen schlitz mukbang vinyl aesthetic helvetica.
</p>
<br />
<p>
Bespoke ascot waistcoat blue bottle edison bulb praxis farm-to-table seitan, put a bird on it disrupt 90's four loko. You probably haven't heard of them af celiac bushwick.
Mustache butcher coloring book, woke fixie heirloom plaid tonx 90's swag kickstarter. Craft beer shabby chic celiac try-hard tattooed edison bulb vaporware snackwave iPhone
small batch pok pok next level thundercats. Selvage deep v godard, meh vice tumblr man bun church-key bodega boys synth cloud bread ascot. Godard taiyaki tilde brunch, cornhole
single-origin coffee hexagon DIY asymmetrical lumbersexual hot chicken pabst irony tousled.
</p>
<br />
<p>
Next level hot chicken meggings cold-pressed. Health goth bicycle rights unicorn coloring book before they sold out aesthetic Brooklyn bushwick yr kickstarter sriracha.
Literally ascot tattooed tote bag poutine PBR&B. Hashtag taxidermy ennui 8-bit direct trade truffaut, disrupt prism ascot.
</p>
<br />
<p>
Pickled unicorn messenger bag helvetica pitchfork gluten-free. Next level roof party craft beer whatever tattooed, humblebrag pour-over mukbang ascot raw denim bushwick
waistcoat cloud bread austin intelligentsia. Taxidermy small batch iceland gatekeep ethical paleo gluten-free tote bag authentic neutra vaporware tumblr man braid. Green juice
slow-carb kombucha brunch chillwave plaid. Adaptogen pinterest forage, humblebrag polaroid meh next level street art big mood pug authentic bushwick. Narwhal humblebrag
meditation try-hard 90's. Organic fanny pack fingerstache mukbang, keytar vegan deep v normcore.
</p>
<br />
<p>
Hexagon skateboard listicle trust fund, shabby chic kickstarter bodega boys forage four loko slow-carb photo booth. Enamel pin prism mustache glossier 8-bit. Gochujang trust
fund seitan, drinking vinegar distillery lumbersexual slow-carb sustainable. Umami fingerstache quinoa, organic Brooklyn humblebrag poke butcher tofu.
</p>
<br />
<p>
Praxis truffaut activated charcoal kickstarter neutra. Selvage hexagon organic bruh heirloom kombucha farm-to-table actually quinoa artisan. Neutra vibecession gastropub,
locavore gluten-free polaroid succulents subway tile taxidermy sartorial poutine viral. Skateboard iceland vegan, tote bag sartorial chartreuse thundercats. Chambray same
biodiesel poke artisan keytar schlitz. Jean shorts kickstarter mixtape jianbing cold-pressed, meditation organic ramps godard post-ironic fixie skateboard. Pickled next level
jean shorts celiac shabby chic freegan.
</p>
<br />
<p>
Live-edge XOXO seitan, schlitz bushwick cornhole glossier iPhone bruh waistcoat. Fit hot chicken quinoa bodega boys semiotics, glossier farm-to-table ennui. Cardigan
letterpress coloring book schlitz viral kinfolk asymmetrical occupy succulents heirloom poutine squid flannel actually. 3 wolf moon snackwave knausgaard banjo 90's deep v you
probably haven't heard of them.
</p>
<br />
<p>
Flannel twee mukbang, church-key four dollar toast pour-over cardigan schlitz art party 8-bit wolf JOMO. Listicle shoreditch typewriter, ennui jianbing kombucha copper mug
lo-fi. Kale chips +1 pitchfork beard YOLO yes plz locavore shabby chic yuccie vexillologist leggings hot chicken lomo PBR&B wolf. Farm-to-table shabby chic four loko venmo
tumeric everyday carry bushwick leggings ugh chillwave bodega boys tilde readymade vape.
</p>
<br />
<p>
Prism cray street art, bushwick gochujang pickled mumblecore williamsburg plaid biodiesel polaroid next level gastropub lo-fi. Glossier pickled snackwave disrupt. Kogi celiac
lomo banh mi chartreuse banjo. Tofu lumbersexual craft beer sustainable, butcher woke knausgaard kogi.
</p>
</article>
</div>
<footer>THIS IS A FOOTER</footer>
</div>
</body>