Making a footer stick to the bottom of a page without extraneous markup
If you only had to worry about Firefox and Webkit browsers, what CSS would you use to make the footer in the following HTML stick to the bottom of the page? Note: I don't want to add any of markup to the page.
<html>
<body>
<header>...</header>
<article>...</article>
<aside>...</aside>
<foo开发者_开发问答ter>...</footer>
</body>
</html>
Just set the position as fixed and set bottom to 0:
footer
{
position:fixed;
bottom:0;
}
Works a treat in FF, IE7, IE8, etc for me. Here's my actual CSS on one of my sites for a footer (a div with the id footer
):
#footer
{
clear:both;
color:#FFF;
background:#666;
bottom:0;
border:solid 1px #333;
height:30px;
width:100%;
min-width:950px;
position:fixed;
z-index:100;
}
Try using position:fixed
You could do something like:
footer { position:fixed; bottom:0; }
It's worth noting that since you're using the <footer>
tag, you shouldn't put the # in front of 'footer' in the CSS, as using #footer is referencing an element with an id of 'footer', not the footer element itself
div#footer { position:fixed; bottom:0; }
is the way to go
精彩评论