I am curious if anyone can get 100% of these requirements working together, I can only get 80% (#4 is a pain):
- The header always stays at the top of the page.
- The footer always stays at the bottom of the page.
- The main takes up the remaining middle of the page, regardless of whether it overflows or not.
- When main overflows, there is a scrollbar that takes up the entire height of the browser (i.e. next to the header, main, and footer). Optional bonus: when main is small, there is no scrollbar.
- Only main experiences overscroll. Header and footer are do not experience overscroll.
The best I have done so far does not have the full scrollbar height:
<div className="flex flex-col h-full overflow-hidden">
<header />
<main className="flex-1 overflow-auto" />
<footer />
</div>
I am using Tailwind, but feel free to use plain CSS. Hope it doesn’t crush your soul like it has mine.
3
Answers
You can try this
html code
and css
You said base css is ok, so here i give you another approach, with some minor change as not use properties like your css class or change
position: absolute
toposition: fixed
.Does this meet your expectation?