 <p>Here you go:</p> <p><a href="http://codepen.io/vsync/pen/FyluI" rel="nofollow noreferrer"><strong>Example page - footer sticks to bottom</strong></a></p> <p>this will have the content right <br /> between the footer and the header. <br /> no overlapping.</p> <h2>HTML</h2> <pre><code>&lt;header&gt;HEADER&lt;/header&gt; &lt;article&gt; &lt;p&gt;some content here (might be very long)&lt;/p&gt; &lt;/article&gt; &lt;footer&gt;FOOTER&lt;/footer&gt; </code></pre> <h2>CSS</h2> <pre><code>html{ height:100%; } body{ min-height:100%; padding:0; margin:0; position:relative; } body:after{ content:''; display:block; height:100px; // compensate Footer's height } header{ height:50px; } footer{ position:absolute; bottom:0; width:100%; height:100px; // height of your Footer (unfortunately it must be defined) } </code></pre>