Take the 2-minute tour ×

I have a div which contains elements using the php include function, and below I have a footer. The footer is only visible if you scroll to the bottom of the page, to save space.

Problem is that if the content height is small(e.g 300px) then the footer is not placed on the bottom of the page which makes the layout look not as good.

So my question is, can I position the footer on the bottom when no scrollbar appears on the browser window(meaning the content div height is small) ?

share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

This can only be done with JavaScript, as there is no way for your server (PHP) to know the height of the window. That being said, it certainly can be done: if the content is less than the height of the browser window, you can e.g. set position:fixed and bottom: 0px on the footer div to stick it to the bottom of the window; otherwise, just let it be on the bottom of the content.

share|improve this answer
Thanks this worked: $(document).ready(function() { if (document.getElementById('content').scrollHeight < document.body.clientHeight){ document.getElementById('footer').style.position = "fixed"; document.getElementById('footer').style.bottom = "0"; } }); </script> –  zefs Oct 9 '12 at 16:18
Actually I found a problem. Content div has a background-image. After the script runs, the area that was footer's position is now empty and doesn't have the background applied. Any ideas? –  zefs Oct 9 '12 at 16:36
Nevermind, fixed it by using height:100% –  zefs Oct 9 '12 at 17:10
add comment

Sounds like a sticky footer is what you're looking for:


<div id="wrap">
    <div id="main">content</div>

<div id="footer">footer</div>​


* { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {
    height: auto; 
    min-height: 100%;

#main { 
    padding-bottom: 40px; /* must be same height as the footer */

#footer { 
    position: relative;
    margin-top: -40px; /* negative value of footer height */
    height: 40px;
    background: #c00;

Fiddle here.

That'll allow the footer div to be positioned at least at the bottom of the window; as the main content div grows, it'll push the footer down accordingly.

share|improve this answer
add comment

Your Answer


