title: What is the 2017 pure CSS3 solution to have a fixed header and a well behaving article behind it?
body: <p>Making the header { position:fixed } in a basic </p>
  
  <pre><code>&lt;header&gt;&lt;/header&gt;
  &lt;article&gt;&lt;/article&gt;
  &lt;footer&gt;&lt;/footer&gt;
  </code></pre>
  
  <p>layout, causes some quirks, since the article now starts at top = 0 such that its content is hidden by the header. A common workaround is to set the article's padding or margin equals to the header height. And here lays the problem: Assuming some header size is risky. Javascript can be used to measure the header heigth and set the padding accordingly, but this is not pure css. Duplicating the header with { visibility: hidden, position: initial } is the best pure CSS solution I found:</p>
  
  <p><a href="http://codepen.io/parkerbennett/pen/lzqEH" rel="nofollow noreferrer">http://codepen.io/parkerbennett/pen/lzqEH</a> </p>
  
  <p>or here at <a href="https://stackoverflow.com/questions/10975268/position-fixed-header-in-html">position fixed header in html</a> (@James in a comment)</p>
  
  <p><strong>Question: In the year 2017, is there a pure CSS (no JS) solution without duplicating the header, that avoids this workaround?</strong></p>
  
  <p>I came up with this flex solution, but it is not perfect and therefore does not beat the workaround above (which from user perspective is perfect):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;lab&lt;/title&gt;
      &lt;style&gt;
          /* reset */
          body, div {
              padding: 0;
              margin: 0;
          }
  
          body {
              display: flex;
              flex-direction: column;
          }
  
          article {
              display: flex;
              flex: 1;
              overflow: auto;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;header text&lt;/header&gt;
      &lt;article&gt;
          scrollable text
      &lt;/article&gt;
      &lt;footer&gt;footer content&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem here is, the scrollbar does not go over the full browser window height, but only along the article height.</p>
  
  <p>I also thought about using CSS3 calc() but we cannot measure the height of the header and use this as margin inside the article-css.</p>