Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

100% footer with no divs

100% footer with no divs

Problem

I'm making a template based on not using DIVs, but I am having trouble with the footer. I was wondering if I could have a 100% width footer (a bit like stackoverflow) that actually sticks to the bottom, wont fix or hide overflow when more content is added and maintains the background colours.

Is this possible?

My Fiddle.

header, article {
    margin: 0 auto;
    display:block;
    width:500px
}
html, body {
    height:100%
}
body {
    min-height:100%;
    margin:0
}
header, article, section {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:black
}
footer {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background:grey
}
footer p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
footer article {
    height:50px;
    width:100%
}
footer section {
    background:black;
    height:50px;
    width:100%
}
footer section p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
header, article {
    margin: 0 auto;
    display:block;
    width:500px
}
html, body {
    height:100%
}
body {
    min-height:100%;
    margin:0
}
header, article, section {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:black
}
footer {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background:grey
}
footer p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
footer article {
    height:50px;
    width:100%
}
footer section {
    background:black;
    height:50px;
    width:100%
}
footer section p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
Problem courtesy of: teotwawki

Solution

I've got an example where the footer is fixed and use body:after to add padding to make it scrollable.

jsfiddle: http://jsfiddle.net/wk8Jf/3/

or if you want to it scroll with the page:

jsfiddle: http://jsfiddle.net/wk8Jf/5/

Solution courtesy of: Robert McKee

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

100% footer with no divs

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×