sticky footer

Here I'm going to show you a super simple way of making sure that your footer stays at the bottom of your page without hard-coding your height or setting position as absolute

There are three main elements

• pageContent
• offSet
• footer

The CSS

* {
 margin: 0;
}
html, body {
 height: 100%;
}
.pageContent {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -25px;
}
.offSet{ /* the offset is used to stop the footer from over laping with the page content */
height: 25px; 
}

.footer {
 background-color:#000;
 color:#fff;
 height: 25px;
}

The HTML

 



Boy desirous families prepared gay reserved add ecstatic say
Comfort reached gay perhaps chamber his six detract besides add. Moonlight newspaper up he it enjoyment agreeable depending. Timed voice share led his widen noisy young. On weddings believed laughing although material do exercise of. Up attempt offered ye civilly so sitting to. She new course get living within elinor joy. She her rapturous suffering concealed.



Started earnest brother believe an exposed so. Me he believing daughters if forfeited at furniture. Age again and stuff downs spoke. Late hour new nay able fat each sell. Nor themselves age introduced frequently use unsatiable devonshire get. They why quit gay cold rose deal park. One same they four did ask busy. Reserved opinions fat him nay position. Breakfast as zealously incommode do agreeable furniture. One too nay led fanny allow plate.


  
  




  Rose past oh shew roof is song neat.
 

Once done you should end up with something like the following: