title: Why is my footer at the top of my page?
body: <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>