Create a footer at the bottom of the page without extraneous layout

If you only had to worry about Firefox and Webkit, what CSS would you use to have the footer in the HTML footer at the bottom of the page? Note. I do not want to add any markup to the page.

<html>
    <body>
        <header>...</header>
        <article>...</article>
        <aside>...</aside>
        <footer>...</footer>
    </body>
</html>
+3
source share
3 answers

Just set the position as fixed and set the bottom to 0:

footer
{
   position:fixed;
   bottom:0;
}

Works with treatment in FF, IE7, IE8, etc. for me. Here is my actual CSS on one of my footer sites (div with 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;
}
+6
source

Try using position:fixed

You can do something like:

footer { position:fixed; bottom:0; }

, , <footer>, # " " CSS, #footer " ",

+1

div#footer { position:fixed; bottom:0; } is the way

0
source

Source: https://habr.com/ru/post/1752476/


All Articles