CSS - how to style a footer


Tags: css,css3

Problem :

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?



Solution :

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.


    CSS Howto..

    How to convert 2 css files into one swf file in flex 4.11 SDK

    How can I create facebook style vertical border line (layout)? :)

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    How can I make a table column width somewhat similar automatically?

    How to reference a long class name with spaces in CSS?

    How to style radio button or checkbox inside a bootstrap table?

    How to display a div as overlay which is hovered by a div which is inside another div?

    CSS: How to create colsgroup like semantic-ui way

    HTML/CSS: How to create a box for the footer?

    How to build some basic tiles with Title and Description?

    How do I let the DOM know about new elements created on the fly?

    How to get css class name using Selenium?

    .show() not working on page load

    how to save responsive menu open/close value?

    How to apply zoom transition on label and textbox simultaneously in HTML/CSS?

    how to change the background color of first row in html table and all other rows alternate color

    How to align content of a div to the bottom?

    How to check if CSS is on an element? [closed]

    Why do small spaces keep showing up in my web pages?

    Floating of Divs not exact. How to arrange them the right way?

    How to make image previews (thumbnails) using html/css

    How to get minimal jQuery slideshow to slide properly?

    CSS Rollovers: how to maintain “hit area” size when hidden image is larger than anchor area

    How to position CSS Ribbon to go over one table cell

    How to include image into css file using JSF tag

    How to turn off carousel when resized?

    How to override Liferay core' css?

    How to scale a .svg being the background in a div?

    how can i center the text inside my css div circle

    How to wait for a video background in HTML until it finish and then view the contents of body section?