Details
Sticky Footer
By Paul
Jul 02, 2015 am31 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.
By Paul
Jul 02, 2015 am31 9:55 AM
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 | templates, css |
| Views | 276 views. Averaging 276 views per day. |
Sorry, you don't have permission to post. Log in, or register if you haven't yet.
Please login or register.