StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>UPDATE</strong></p> <p>My original answer is from a long time ago, and the links are broken; updating it so that it continues to be useful.</p> <p>I'm including updated solutions inline, as well as a working examples on JSFiddle. Note: I'm relying on a CSS reset, though I'm not including those styles inline. Refer to <a href="https://necolas.github.io/normalize.css/" rel="noreferrer">normalize.css</a></p> <p><strong>Solution 1 - margin offset</strong></p> <p><a href="https://jsfiddle.net/UnsungHero97/ur20fndv/2/" rel="noreferrer">https://jsfiddle.net/UnsungHero97/ur20fndv/2/</a></p> <p><strong>HTML</strong></p> <pre><code><div id="wrapper"> <div id="content"> <h1>Hello, World!</h1> </div> </div> <footer id="footer"> <div id="footer-content">Sticky Footer</div> </footer> </code></pre> <p><strong>CSS</strong></p> <pre><code>html, body { margin: 0px; padding: 0px; min-height: 100%; height: 100%; } #wrapper { background-color: #e3f2fd; min-height: 100%; height: auto !important; margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */ } #wrapper:after { content: ""; display: block; height: 50px; /* the footer's total height */ } #content { height: 100%; } #footer { height: 50px; /* the footer's total height */ } #footer-content { background-color: #f3e5f5; border: 1px solid #ab47bc; height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */ padding: 8px; } </code></pre> <p><strong>Solution 2 - flexbox</strong></p> <p><a href="https://jsfiddle.net/UnsungHero97/oqom5e5m/3/" rel="noreferrer">https://jsfiddle.net/UnsungHero97/oqom5e5m/3/</a></p> <p><strong>HTML</strong></p> <pre><code><div id="content"> <h1>Hello, World!</h1> </div> <footer id="footer">Sticky Footer</footer> </code></pre> <p><strong>CSS</strong></p> <pre><code>html { height: 100%; } body { display: flex; flex-direction: column; min-height: 100%; } #content { background-color: #e3f2fd; flex: 1; padding: 20px; } #footer { background-color: #f3e5f5; padding: 20px; } </code></pre> <p>Here's some links with more detailed explanations and different approaches:</p> <ul> <li><a href="https://css-tricks.com/couple-takes-sticky-footer/" rel="noreferrer">https://css-tricks.com/couple-takes-sticky-footer/</a></li> <li><a href="https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" rel="noreferrer">https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/</a></li> <li><a href="http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page" rel="noreferrer">http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page</a></li> </ul> <hr> <p><strong>ORIGINAL ANSWER</strong></p> <p>Is this what you mean?</p> <p><a href="http://ryanfait.com/sticky-footer/" rel="noreferrer">http://ryanfait.com/sticky-footer/</a></p> <blockquote> <p>This method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.</p> </blockquote> <p>This footer will stay at the bottom of the page permanently. This means that if the content is more than the height of the browser window, you will need to scroll down to see the footer... but if the content is less than the height of the browser window, the footer will stick to the bottom of the browser window instead of floating up in the middle of the page.</p> <p>Let me know if you need help with the implementation. I hope this helps.</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