I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.
I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here: http://jsfiddle.net/bHJR3/1/
How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?
I know how to do this through jquery but I am trying to avoid js if at all possible.
Thanks for any help.
EDIT: Here's a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/
The reason it broke when you set bottom: 0
on #footer
is because everything inside #footer
had position: absolute
. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer
solves this. Setting height: 100%
on the a
tags will cause them to size relative to their parent element. You can keep div.content
, but you would also have to set height: 100%
on it.
Add the following CSS to #footer
:
bottom: 0;
height: 90px;
Add the following CSS to A
:
height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */
Remove div.content
. It doesn't seem necessary here.
Edit
You can center the footer by adding/changing the following CSS on #footer
:
width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */
Edit
You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:
#footer {
position: fixed;
width: 100%;
max-width: 640px;
height: 114px;
bottom:0;
left: 50%;
margin-left: -320px;
}
@media only screen and (max-width: 640px) {
#footer {
margin-left: auto;
left: 0;
}
}