Best CSS pattern for dynamic masthead + sticky sidebar + body scroll?
Hey everyone! 
I’m exploring a layout pattern and would love some sanity checks or alternative ideas.
My requirements are:
- A banner that appears/disappears dynamically (sticky when shown)
- A header that’s always visible (sticky)
- A sidebar that fills 100% of the remaining height below the banner + header and is scrollable independently
- A content area that can reliably reference the remaining height (e.g., for tables or charts)
- The ability to add sub-headers inside the content that stick under the global header
- No “magic offsets” like top: 49px sprinkled across components
- Keep scrolling on the body for better accessibility
- Keep JavaScript to a minimum — CSS-only layout logic if possible
I’ve attached a pure HTML + CSS example to play with in the inspector. And also an example with scroll on the content area, but without any css properties.
I’m curious:
1. Is this approach (using CSS variables and sticky positioning with calc’d remaining height) the best/cleanest modern way to do it?
2. Are there newer or lesser-known CSS features that could make this cleaner? I'd avoid container queries for now for compatibility reasons.
3. What other real-world cases might still require knowing the header offset or remaining height in CSS?
e.g., sticky sub-navigation, fullscreen modals/tooltips that avoid overlapping the header, or scroll-margin-top offsets for anchor links.
I’m constrained by having a virtualized table (so I need a fixed height for the scroll area), which is why the “remaining height” calculation matters here.
Thanks a lot for any insights
I’m exploring a layout pattern and would love some sanity checks or alternative ideas.
My requirements are:
- A banner that appears/disappears dynamically (sticky when shown)
- A header that’s always visible (sticky)
- A sidebar that fills 100% of the remaining height below the banner + header and is scrollable independently
- A content area that can reliably reference the remaining height (e.g., for tables or charts)
- The ability to add sub-headers inside the content that stick under the global header
- No “magic offsets” like top: 49px sprinkled across components
- Keep scrolling on the body for better accessibility
- Keep JavaScript to a minimum — CSS-only layout logic if possible
I’ve attached a pure HTML + CSS example to play with in the inspector. And also an example with scroll on the content area, but without any css properties.
I’m curious:
1. Is this approach (using CSS variables and sticky positioning with calc’d remaining height) the best/cleanest modern way to do it?
2. Are there newer or lesser-known CSS features that could make this cleaner? I'd avoid container queries for now for compatibility reasons.
3. What other real-world cases might still require knowing the header offset or remaining height in CSS?
e.g., sticky sub-navigation, fullscreen modals/tooltips that avoid overlapping the header, or scroll-margin-top offsets for anchor links.
I’m constrained by having a virtualized table (so I need a fixed height for the scroll area), which is why the “remaining height” calculation matters here.
Thanks a lot for any insights
layout-example.html10.14KB
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
