-2

i have created a website but am having a problem with the footer. it stays at bottom of the page when there is a lot of content but if there is very less content on the page i want it to stay perfectly at the bottom of the screen

website link: http://www.amideeptech.com/syllogae/index.html

if you see the privacy page the footer is not perfectly at the bottom due to which the scroll bar is active

i have tried using bottom: 0 on the footer div and keeping the min-height of the body to 100% while keepin the margin-top of the footer to -60px. nothing seems to work

user3428632
  • 1
  • 1
    http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page – Nico O Mar 17 '14 at 11:56

1 Answers1

0

What you're searching is called a Sticky Footer. The basics are simple (see code below) : you give the footer an height and use this value to push it to the top with a negative margin-top. Then you take this same value and add it to the padding-bottom of your content div in order to give some space to the footer and that's it!

HTML
====
<div id="wrapper">
    <div id="content">
        &nbsp;
    </div>
</div>

<div id="footer">
    &nbsp;
</div>


CSS
===
html, body {
    height: 100%;
}
#wrapper {
    min-height: 100%;
}
#content {
    overflow:auto;
    padding-bottom: 180px; /* value of the footer's height */
}
#footer {
    position: relative;
    margin-top: -180px; /* negative value of the height */
    height: 180px;
    clear:both;
}
Cholesterol
  • 177
  • 9