Headers and footers over contents... How can i fix this?
<p>I have a big problem with position of contents. I have a large amount of content that is hidden under headers and footers. I want to have a margin-bottom/top for headers/footers on every page.</p>

<p>Here is my HTML document:</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>@page {
            margin: 180px 50px;
        }

        #header {
            position: fixed;
            left: 0px;
            top: -180px;
            right: 0px;
            height: 300px;
            background-color: orange;
            text-align: center;
        }

        #footer {
            position: fixed;
            left: 0px;
            bottom: -180px;
            right: 0px;
            height: 300px;
            background-color: lightblue;
        }

        #footer .page:after {
            content: counter(page, upper-roman);
        }

        section {
            margin-top: 100px;
        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;h1&gt;Widgets Express&lt;/h1&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;
    &lt;p class="page"&gt;Page &lt;/p&gt;
&lt;/div&gt;
&lt;section&gt;
    What is Lorem Ipsum?
    &lt;br&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry.&lt;br&gt;Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.&lt;br&gt;It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.&lt;br&gt;It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    &lt;br&gt;Why do we use it?
    &lt;br&gt;It is a long established fact that a reader will be distracted by &lt;br&gt;the readable content of a page when looking at its layout.
    &lt;br&gt;The point of using Lorem Ipsum is that it has a more-or-less normal &lt;br&gt;distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
    &lt;br&gt;Many desktop publishing packages and web page editors now use Lorem &lt;br&gt;Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
    &lt;br&gt;Various versions have evolved over the years, sometimes by accident,&lt;br&gt; sometimes on purpose (injected humour and the like).


    &lt;br&gt;Where does it come from?
    &lt;br&gt;Contrary to popular belief, Lorem Ipsum is not simply random text.
    &lt;br&gt;It has roots in a piece of classical Latin literature from 45 BC, &lt;br&gt;making it over 2000 years old.&lt;br&gt;Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.&lt;br&gt;Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.&lt;br&gt;This book is a treatise on the theory of ethics, very popular during the Renaissance.&lt;br&gt;The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    &lt;br&gt;The standard chunk of Lorem Ipsum used since the 1500s is reproduced &lt;br&gt;below for those interested.&lt;br&gt;Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H.&lt;br&gt;Rackham.

    &lt;br&gt;Where can I get some?
    &lt;br&gt;There are many variations of passages of Lorem Ipsum available, &lt;br&gt;but the majority have suffered alteration in some form, by injected hum&lt;br&gt;our, or randomised wo&lt;br&gt;rds which don't look &lt;br&gt;even slightly believable.&lt;br&gt;If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.&lt;br&gt;All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.&lt;br&gt;It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.&lt;br&gt;The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.


    &lt;br&gt;5
    &lt;br&gt;paragraphs
    &lt;br&gt;words
    &lt;br&gt;bytes
    &lt;br&gt;lists
    &lt;br&gt;Start with 'Lorem
    &lt;br&gt;ipsum dolor sit amet...'
    &lt;br&gt;Generate Lorem Ipsum

&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>The resulting PDF looks like this: <a href="http://3.1m.yt/28MKkWG.png" rel="nofollow noreferrer">http://3.1m.yt/28MKkWG.png</a></p>