CODEWITHSUNDEEP
csscss-grid
Doug Schepers
Doug Schepers

Reputation: 11

Fixed header and footer, with scrollable sidebar inside 1fr CSS grid region

I have a CSS grid layout for a webapp, with a fixed-size header and footer (defined with rem units), and an expandable center row (defined as 1fr) that contains two sidebars and a central content area. The outer grid container is defined with a width and height to fill up the viewport (100vw/vh). I want the center row to take up all the space between the header and footer, and for any overflow to scroll, rather than to expand the height of the page.

I've tried various possible solutions, including using overflow-y:scroll, but nothing seems to work. The extra content makes the page longer, rather than making the region scrollable.

I don't want to use a fixed size for the center row, because I want it to expand to fit arbitrarily large screens.

Here's a fairly minimal example of my layout:

https://codepen.io/Shepazu/pen/EwePgB

(Please note that the nested areas in the HTML and CSS are intentional, so any solution should be CSS only, and shouldn't change the HTML markup.)

Upvotes: 1

Views: 995

Answers (1)

Vishnu
Vishnu

Reputation: 1701

Assuming the fixed height of header and footer is 100px, then give the style to the content area:

.center-row {
max-height: calc(100vh - 200px);
overflow-y: auto;
}

Upvotes: 1

Related Questions