CSS - how to style a footer

Question

is there a way to style a footer, so when there is a content (more than the height of the browser) it will be at bottom of the page(hidden), but if there is not enough content it will stick at bottom edge of the browser?

Answer 1

One solution I use requires a known height of your footer.

Fiddles:

A lot of content

A little content

Here's the HTML:

<main>
  hello
</main>
<footer>
  i am the footer
</footer>

And here's the CSS:

html, body {
    height: 100%;
}
main {
    min-height: 100%;
    margin-bottom: -100px;
    background: #ddd;
}
main:after {
    content: "";
    display: block;
    height: 100px;
}
footer {
    height: 100px;
    background: #eee;
}

The trick is to set the main part of your document to have a min-height of 100%. This element must contain everything else on your page. In my example, I used the main element for this.

Next, give this element a negative margin equal to the height of the footer. This moves it up just enough to leave room for the footer there at the bottom.

The last piece of the puzzle is the after element. This is required to fill the space of that negative margin. Otherwise, the content of the main will overflow into the footer.

Answer 2

I can only recommend to read this.
Show footer if at bottom of page or page is short else hide

or this
http://css-tricks.com/snippets/css/fixed-footer/