2

See the image at this link:

https://docs.google.com/document/d/1r9L9eLBddMOdHAP3KfAx8ND-SF8b8zBl53o88aUbHT4/edit?pli=1

In the above image link, i have covered footer in black rectangle and i want it should be always on bottom last without any margin from bottom.

Actually the problem arose when i deleted a div above the footer. I am giving you the code responsible for this:

HTML

<div id="footer">
<div class="shell">
      <!--content here-->
    </div>
     </div>

CSS

.shell { width:988px; margin:0 auto; }
  #footer { height:44px; background:url(images/footer.gif); line-height:44px;
     color:#fff;              
       }
     #footer a{ color:#fff; }

The css of div-box which is just above the footer. Actually this is responsible when i edited the margin-bottom yet i want to know how to make footer without space from bottom. Meanwhile CSS for div-box is:

    .box { background:#fbfcfc; height:100%; padding:1px; margin-bottom:10px; }

When i did margin-bottom:140px, it shows footer at the end. but i still want to know how to make footer at the bottom without space from bottom whether content is short or large.

Please share your knowledge!

geekhere
  • 99
  • 1
  • 2
  • 12

3 Answers3

3

UPDATE: A coworker of mine just had a similar problem and I just happened to think this time that maybe this could easily be answered with CSS only. A simple height-based media query would work perfectly here for "a footer that should be at the bottom of content unless content is shorter than the viewport, in which case the footer should align to the bottom of the viewport" moment. If that's the case. Probably this should work best: http://codepen.io/scrimothy/pen/qEivg

Ultimately, use a media query for height and determine if the viewport height is taller or shorter than the height of the body and footer. Then handle those events differently with the media query as shown in the link.

Method 1: always on bottom

If you're try to make it always rest on the bottom, you can just set

footer {
  position: absolute;
  bottom: 0;
}

However, this would mean that if your page content is longer than the viewport, then you'll have a conflict with the body running behind the footer text.

Method 2: min-height

You could also set a min-height to your body content div so that you can approximate where you think your users' viewports will be:

.body-content {
  min-height: 580px;
}

This won't get it always so you'll possibly have too much space between body content and footer (pushing the footer below the fold) or you could still have a gap between the footer and bottom of the viewport should the user have a taller window than you expected.

Method 3: jQuery (best of both worlds)

If you're already using jQuery in your site, this is the way to go.

var pageHeight = $('body').height(),
  footerHeight = $('footer').height();
if (pageHeight < $(window).height() - footerHeight) {
  $('footer').css({
    'position': 'absolute',
    'bottom': '0'
  });
} else {
  $('footer').css({
    'position': '',
    'bottom': ''
  });
}

This will allow your footer to fall in line normally with your content if it's a long page, or it'll use Method 1 above if it's a short page. (Setting css properties to '', removes them from the inline styles, thereby putting them back to their defined settings).

Here's a demo with short text and one with long text

Scrimothy
  • 2,536
  • 14
  • 23
1

Another thing to check for, and less obvious (I struggled with this recently) is to make sure you don't have footer content, i.e., elements inside of your footer, over hanging below your footer. This can happen if you have a container inside your footer with a height that is higher than the height of the footer.

This can be detected with the Inspector tool that is part of the Firefox Web Developer addon. The Inspector puts a dotted border around each element that you hover over, and you can see if something like a paragraph or div is dangling in the space below your footer.

TARKUS
  • 2,170
  • 5
  • 34
  • 52
0

I just had a similar problem recently - turns out that the main wrapper container was not set to overflow:hidden, that fixed the problem straight away for me, maybe double check that as an option before trying to set the footer to position absolute.

slunt32
  • 1