Why is my footer at the top of my page?
<p>Firstly, I was used </p>

<pre><code>#copyright {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px
}

footer {
position: fixed;
bottom: 50px;
left: 0;
right: 0;
}
</code></pre>

<p>Which worked fine until I tested my site on a smaller screen and realised the footers were overlapping the content. So then I tried setting <code>html</code> and <code>body</code> height to <code>100%</code> and also setting my <code>wrapper</code> to min height <code>100%</code> and placing the footer underneath, in hopes of a more relative footer. But now it is stuck at the top, what is causing this ?</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>#wrapper {
 display: block;
   position: fixed;
   text-align: center;
   min-height: 100%;
   width: 100%;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

#header p {
 font-size: 2em;
 margin: 0;
}

#header ul {
 list-style-type: none;
}

#header ul li {
 display: inline;
 padding: 20px 20px;
 font-size: 1.5em;
 margin: 0 30px;

}


#copyright {
 position: relative;
 height: 50px;
 width: 100%;
 text-align: center;
 font-size: 0.8em;
}

#footer {
 position: relative;
 margin-top: 15px;
 height: 50px;
 width: 100%;
 text-align: center;
 font-size: 0.8em;
}

#footer ul {
 list-style-type: none;
}

#footer ul li {
 display: inline;
 margin: 0 15px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
&lt;div id="header"&gt;
&lt;p&gt;Pavel Design&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div id="contentwrapper"&gt;
&lt;div id="content"&gt;
&lt;h1&gt;Lorem Ipsum&lt;/h1&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus     imperdiet nulla scelerisque bibendum. Praesent eu tempus dolor, vel venenatis purus.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;footer id="footer"&gt;
    &lt;ul&gt;
 &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="mailto:info@pavel.co.nz"&gt;info@pavel.co.nz&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;p&gt;© Pavel Design 2016  |  Photography, design and website construction by Pavel Design 2016&lt;/p&gt;
&lt;/footer&gt;
 </code></pre>
</div>
</div>
</p>

<p>EDIT: </p>

<p>My wrapper uses fixed position so that I can assign <code>top: 0</code> <code>bottom: 0</code> and so on, because I use a background image that covers the whole screen, when I only use <code>min-height</code> and <code>min-width</code> the background image doesn't cover the whole screen, instead it leaves a small white border around the outside of the page</p>