CSS To Make Vertical Scrolling Region Under Fixed Header?

Question

Goal: Emulate the fixed header and scrollable content of this StackOverflow page:

Footer under the content scrolls up as the content scrolls up.
When paging-down (via keyboard), nothing gets clipped by the header. Ie, content cannot go behind the header.
Anchors do not go behind the header.
No double-scrollbars.
If i increase height of header (eg on hover), the page content does not get pushed down further (ie, the taller header just covers more of the content).
#header, #content, and #footer divs are siblings

<div id="header">This is the header.</div>

<div id='content'>This is the content.</div>

<div id='footer'>This is the footer.</div>

Url of site to be applied: https://gunretort.xyz/index.php/Portal:Tag?Tag=CommonGround

Body Padding Fails: A common recommendation is body{padding-top:...}, to push #content down. But it doesn't really push content down-- content still scrolls behind the header, so as you page down, the top of the content gets clipped by the header. Anchors land behind the header, where they can't be seen.

Example of content behind header:

Click 'Go to anchor' in this example to see the problem. https://codepen.io/johnyradio/pen/pKxBwQ

StackOverflow: StackOverflow does it right. The footer scrolls up with content, as desired. #content and #footer are sibs. I'm seeing the following in the CSS for this page, but i don't know if this is the magic.

#content {
    max-width: 1100px;
    width: calc(100% - 164px);
    background-color: #FFF;
    padding: 24px;
    box-sizing: border-box;
}

div {
    display: block;
}

#content:before, #content:after {
    content: "";
    display: table;
}

body *, body *:before, body *:after {
    box-sizing: inherit;
}

#content:after {
    clear: both;
}

Flex: I also see a lot of Flex in the .css files of this SO page. Flex is used in answers below. Problem with those answers-- they break the #footer.

Grid: Grid seems like it should be the way. But i'm concerned about browser-compatibility. Also, so far, i haven't found a grid solution.

Overflow: This approach uses fixed position to place the #content below the header, without overlap. Making it a fixed-size box with overflow:auto gives the #content div it's own scrollbar. We could fix the #footer position below #content, but drawback is the footer would not scroll up-- it would have to occupy permanent real-estate at the bottom of the viewport.

https://codepen.io/johnyradio/pen/aKReor

+Padding -Margin: Some solutions involve padding and margins. That doesn't work consistently for span-anchors, a-links, coming in from same page or a different page. Using :target when target-id's aren't known doesn't work in all cases. Also, it doesn't address correct page-down. Also, it just seems more efficient to apply style to the major divs, instead of every single link-target. Any solution requiring knowledge of id or class name won't work, because we won't have that knowledge-- besides, a robust CSS solution covering all current and future cases should not require such knowledge.

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block;
}

https://css-tricks.com/hash-tag-links-padding/

Frame: I'm thinking a frame might be an option, but there's the problem that i cannot change the HTML.

Not a duplicate: This question is not a dupe of other threads here. Solutions i've seen on SO don't handle unknown link-targets, page correctly, and scroll the footer (like this page). Eg,

Body top gap; should I use margin or padding?

Kyle Lin Kyle Lin · Accepted Answer · 2018-06-27T20:42:22

Give your content container a fixed position, and set its top and height accordingly. Finally, make it scrollable with overflow: auto.

In short, just replace your #content style with this:

#content{
  position: fixed;
  top: 50px;
  height: calc(100vh - 50px);
  overflow: auto;
  flex: 1;
}

EDIT:

Here's a link to a fork of your pen with the working solution.

CSS To Make Vertical Scrolling Region Under Fixed Header?

3 Answers