How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

Question

I haven\'t added content to my page yet, since I\'m still working on the header and footer. I noticed that my footer, instead of being at the bottom of the page, like it would b

Answer 1

Use css tables:

FIDDLE1 - little content

FIDDLE2 - little content + large footer

FIDDLE3 - lots of content

Markup

header content
content here
footer content

CSS

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}