title: Fixed Page Header
body: <p>I've never dealt with CSS but now I have to. I'm developing some HTML code - a sketch of a website and have a problem with CSS. I would like to have my header in a fixed position, I mean it always should be on the top of the site, even if there is so much content that site has to be scrolled to see everything. I've tried somethig, but it does not work properly. </p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
          margin: 0px 0px 0px 0px;
      }
  
      header {
          border: 2px solid red;
          position: fixed;
          width: 100%;
      }
  
      #top-menu-bar {
          border: 1px dashed red;
          padding: 15px;
          text-align: right;
      }
  
      #main-menu-bar {
          border: 1px dashed red;
          padding: 15px;
      }
  
      #logo-bar {
          border: 1px dashed red;
          padding: 35px;
      }
  
      #content {
          border: 2px solid black;
      }
  
      footer {
          border: 2px solid blue;
          padding: 15px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;html&gt;
        &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="./css/main.css"&gt;&lt;/link&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;header&gt;
            &lt;div id="top-menu-bar"&gt;
           Login &amp;nbsp; | &amp;nbsp; Registration
            &lt;/div&gt;
            &lt;div id="logo-bar"&gt;
           LOGO
            &lt;/div&gt;
            &lt;div id="main-menu-bar"&gt;
                  MenuItem1 &amp;nbsp; | &amp;nbsp; MenuItem3 &amp;nbsp; | &amp;nbsp; MenuItem3
            &lt;/div&gt;
          &lt;/header&gt;
          &lt;div id="content"&gt;
            &lt;h1&gt;
              Content
            &lt;/h1&gt;
            &lt;p&gt;
              Some content&lt;br/&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;footer&gt;
         Footer
          &lt;/footer&gt;
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>if you still do not get it what I mean, here I provide links <a href="http://students.wmi.amu.edu.pl/~s329488/stackoverflow/fixed.html" rel="nofollow noreferrer">with fixed,</a> <a href="http://students.wmi.amu.edu.pl/~s329488/stackoverflow/notfixed.html" rel="nofollow noreferrer">witout fixed</a></p>
  
  <p>Of course, what I'm looking for is nice a solution, without unnecessary code (even CSS and JS). It is important to note that no one element, especially header has not fixed height!</p>