StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><a href="http://ryanfait.com/sticky-footer/">Ryan Fait's sticky footer</a> is a simple solution that I have used several times in the past.</p> <p><strong>Basic HTML</strong>:</p> <pre><code><div class="wrapper"> <div class="header"> <h1>CSS Sticky Footer</h1> </div> <div class="content"></div> <div class="push"></div> </div> <div class="footer"></div> </code></pre> <p><strong>CSS</strong>:</p> <pre><code>* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 142px; /* .push must be the same height as .footer */ } /* Sticky Footer by Ryan Fait http://ryanfait.com/ */ </code></pre> <p>Translating this to be similar to what you already have results with something along these lines:</p> <p><strong>HTML</strong>:</p> <pre><code><body> <div class="wrapper"> <header> </header> <nav> </nav> <article> </article> <div class="push"></div> </div> <footer> </footer> </body> </code></pre> <p>CSS:</p> <pre><code>* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ } footer, .push { height: 142px; /* .push must be the same height as .footer */ } </code></pre> <p>Just dont forget to update the negative on the wrapper margin to match the height of your footer and push div. Good luck!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload