title: Fixed page header overlaps in-page anchors
body: <p>If I have a non-scrolling header in an HTML page, fixed to the top, having a defined height:</p>
  <p>Is there a way to use the URL anchor (the <code>#fragment</code> part) to have the browser scroll to a certain point in the page, but still respect the height of the fixed element <strong>without the help of JavaScript</strong>?</p>
  <pre class="lang-none prettyprint-override"><code>http://example.com/#bar
  </code></pre>
  <pre>
  WRONG (but the common behavior):         CORRECT:
  +---------------------------------+      +---------------------------------+
  | BAR///////////////////// header |      | //////////////////////// header |
  +---------------------------------+      +---------------------------------+
  | Here is the rest of the Text    |      | BAR                             |
  | ...                             |      |                                 |
  | ...                             |      | Here is the rest of the Text    |
  | ...                             |      | ...                             |
  +---------------------------------+      +---------------------------------+
  </pre>