Webmastersite.net

Search    Register    Log In   

Details

Sticky Footer
By
Jul 02, 2015 at 9:55 AM

You might want your footer to stick to the bottom of the page when the page content is short (so that there's empty space in the middle but no empty space below the footer), while still allowing the footer to go down below the fold on long pages. If you know the fixed pixel height you want your footer to be (200px works well for the default footer) then here's a method for you.

First, in the wrapper template, add <div id="pagewrapper"> just below <body> and add </div> just above </body>. Then in the stylesheet add this:

#pagewrapper
{
min-height:100%;
position:relative;
}

.main
{
padding-bottom: 200px;
}

footer
{
height: 200px;
width: 100%;
padding: 0;
margin: 0;
position:absolute;
bottom:0;
left: 0;
}

Your footer is now sticking to the bottom on short pages.




Tags ,
Views 226 views. Averaging 0 views per day.

Sorry, you don't have permission to post. Log in, or register if you haven't yet.

Please login or register.