title: How to fix footer on bottom of screen, regardless of browser or device?
body: <p>I know about sticky footer. But my situation is that I am developing a website that will be used on PC &amp; mobile devices. Therefore, the footer displayed gets adjusted by width of the screen.</p>
  
  <p>And footer's height gets changes on each resolution.</p>
  
  <p>Can anyone have idea that how could I display footer on the bottom of the page(not screen).
  Some page's height is small, and footer gets displayed in between of page.</p>
  
  <p>I have following structure:</p>
  
  <pre><code>&lt;body style="height:100%;"&gt;
   &lt;div style="height:100%;"&gt;
    &lt;div id="wrapper" style="height:100%; max-width:800px;"&gt;
     &lt;div id="header"&gt;
      some content
     &lt;/div&gt;
     &lt;div id="content"&gt;
      some content
     &lt;/div&gt;
     &lt;div id="footer" style="position:relative; width:100%;"&gt;
      some content
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>