Making a footer stick to the bottom of a page without extraneous markup_问答_开发者

Making a footer stick to the bottom of a page without extraneous markup

开发者 https://www.devze.com 2023-01-05 01:52 出处：网络

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

相关专题：css

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