title: How make a sticky header that stays in the page when zooming?
body: <p>Here is a basic example of sticky header:</p>
  <pre><code>#header {
      position:fixed;
      background-color: #CCE;
      width: 500px;
  }
  ...
  #content {
      background-color: #EEE;
      width: 500px;
  }
  </code></pre>
  <p>The header is fixed, and the content underneath scrolls. One problem with that is that if you zoom the page (you do it often on a mobile browser), the right part of the header is no longer accessible, even if you scroll right.</p>
  <p><strong>Fiddle with my example here: <a href="http://jsfiddle.net/76haM/" rel="nofollow noreferrer">http://jsfiddle.net/76haM/</a></strong> (zoom to see it in action)</p>
  <p>How to make a sticky header that &quot;behaves&quot; well on zoom?</p>