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 do I make a line feed in a div tag?

    How to keep links and hover effects on my icon-fonts isolated with CSS

    Third-Level Menu Items Are Always Showing

    How to make a dynamic-height DIV [duplicate]

    Whats a good way to show large background images on css

    How to add a class to an element with CSS

    How to create a simple article design with CSS and HTML5

    How to center this stuff inside a link using CSS?

    How to remove default border of button in jquery mobile?

    How do customize option box that pops up when selectbox is clicked (iOS, HTML, CSS)

    How to handle caching of GWT theme CSS files

    How to access to a CSS file in HTML?

    CSS - How can you apply Border Shadow Inset only to 2 sides?

    How to prevent fixed image from scrolling down?

    How can I ensure that text is inside rounded div?

    CSS - How to make overflow hidden on the right but not the left? [duplicate]

    css how to stretch center div to fill allowable area

    How can I vertically align two floated divs?

    How to set a div's position inside another div to bottom right corner?

    CSS attribute selectors: how to escape newlines within attribute value?

    How to Intercept a css get request [closed]

    jquery easyui TreeGrid: How to make only Column Headers Bold

    How to absolutely position element against page rather than floated parent?

    how to select a input using jquery

    How to highlight widget title with CSS?

    css how to make the div width just for the content

    Flex - understanding how to properly reference an image in a library project css file

    How do I prevent this list from moving across the page?

    how to read the following css class

    How to visually re-order elements in a scrolling dropdown input div?