Need Help Making Inner Div Scrollable without Explicit Height
Hey folks!,
I'm currently working on a project and could use some CSS expertise. I'm trying to create a layout where the header and footer take up auto height, while the main content area fills the remaining space. Additionally, I'd like the main content area to be scrollable if its content exceeds the viewport height.
Here's a brief overview of what I'm trying to achieve:
- Header and footer should have auto height.
- Main content area should fill the remaining space and be scrollable if needed.
I've tried using CSS Flexbox and Grid, but I'm running into an issue where the scrollbar appears on the body itself rather than just the main div.
Code Pen: https://codepen.io/Gaurav-Kuma-R/pen/xxevyJm
If anyone has experience with this or knows a workaround, I'd really appreciate your help!
Thanks a bunch for any assistance you can offer!
I'm currently working on a project and could use some CSS expertise. I'm trying to create a layout where the header and footer take up auto height, while the main content area fills the remaining space. Additionally, I'd like the main content area to be scrollable if its content exceeds the viewport height.
Here's a brief overview of what I'm trying to achieve:
- Header and footer should have auto height.
- Main content area should fill the remaining space and be scrollable if needed.
I've tried using CSS Flexbox and Grid, but I'm running into an issue where the scrollbar appears on the body itself rather than just the main div.
Code Pen: https://codepen.io/Gaurav-Kuma-R/pen/xxevyJm
If anyone has experience with this or knows a workaround, I'd really appreciate your help!
Thanks a bunch for any assistance you can offer!
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
