1

I'm having the following problem I want to dynamically position my footer, so that if I have a long content the footer only shows at the end of the page, but if I have a shorter one, the footer shows on the bottom of the display.

I've tried Sticky footer and it doesn't work cause it's relative to the page display, and I want it to be relative to display height and content height. I've also tried this Jquery Script and doesn't do the trick:

<script>
x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
y = $(window).height();

if (x+100<=y){ // 100 is the height of your footer
    $('#footer').css('top', y-100+'px');// again 100 is the height of your footer
    $('#footer').css('display', 'block');
}else{
    $('#footer').css('top', x+'px');
    $('#footer').css('display', 'block');
}
</script>

Thanks in advance

0

3 Answers 3

1

You could put the footer code under your body content, so if it is < the height of the screen it sets it postion fixed on the bottom. And if the content is > the height then it just stays at the end.

<script>
x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
y = $(window).height();

if (x+100<=y){ // 100 is the height of your footer
    $('#footer').css('bottom', '0');
    $('#footer').css('position', 'fixed');
    $('#footer').css('display', 'block');
}else{
    $('#footer').css('display', 'block');
}
</script>
Sign up to request clarification or add additional context in comments.

Comments

1

I guess what you would like to do is something like below. In this example, you don't have to use a JavaScript code.

DEMO : http://jsfiddle.net/naokiota/QaxH8/6/

HTML:

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

CSS:

html, body {height: 100%;}
#wrap {
    min-height: 100%;
}
#main {
    overflow:auto;
    padding-bottom: 100px; /* footer height */
}
#footer{
    position: relative;
    margin-top: -100px;/* footer height */
    height: 100px;/* footer height */
    clear:both;
    border:1px red solid;
}

Hope this helps.

Comments

0

you make Sticky Footer by using html and css. no need to use JavaScript. please look at demo "http://ryanfait.com/sticky-footer/" will help you how to Sticky Footer?

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.