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

Answer 1

Here's a trick to make the anchor seem bigger so that clicking the link will not cover the actual anchor text. Since you have negative margin, the anchor element will not take up more space. But it will have a scroll position that is 50px taller.

:target {
  padding-top: 50px; 
  margin-top: -50px
}

This uses the :target pseudo-class.

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

Example: https://codepen.io/haakenlid/pen/oyarva