CSS & HTML5: Position a <footer> at the bottom of the page? no wrapper?

css html footer

matt · Aug 9, 2011 · Viewed 61.5k times · Source

the age-old problem. I need to position a <footer> Element at the bottom of the page. However i don't have a wrapper div.

I'm do have the following stucture…

<body>
<header>
<section id="content">
<footer>
</body>

Is there an easy way to push the footer to the bottom if the content is not high enough?

Answer

Came by this question, and thought I'd post what I've come across. Seems like the ideal way to me.

CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML5:

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

All credit goes to http://mystrd.at/modern-clean-css-sticky-footer/

CSS & HTML5: Position a <footer> at the bottom of the page? no wrapper?

Answer

Related questions