Geek Answers Handbook

The footer is below only if the page is short

I have a website with several pages. each page has a different height (obviously, but I mention this).

what I would like to achieve is that if the content of the page is lower than the browser window, the footer tag will get a fixed position and will be aligned at the bottom of the page.

iv'e tried this js:

$(function(){ if ($(document).height() > $("footer").offset().top+44) { $("footer").addClass('fixbottom'); } } }); $(window).resize(function() { if ($(document).height() > $("footer").offset().top+44) { $("footer").addClass('fixbottom'); } });

and what css:

 .fixbottom { width: 100%; position: fixed; bottom: 0; } footer { height:44px; background: #7abde9; color: #ffffff; text-align: center; }

the top + 44 in my jquery is that my bottom tag - 44 heights iv'e used a ready-made document and resized the window to make sure that all situations should occur, but, unfortunately, this does not work in any way.

any help should be greatly appreciated

+6
source share
6 answers

You do not need javascript for this.

There is a method called " stickyfooter " that provides a way to always find the footer, even if there is not much content.

Here is a simple example:

 html, body { height:100%; } #wrapper { position: relative; min-height:100%; } #main { padding-bottom: 44px; } footer { height: 44px; position: absolute; bottom: 0; left: 0; width: 100%; }

See fiddle for how it works.

+8
source

You can only solve your problem with CSS.

You need an element for your content and a footer element below.

 <div id="container"> <div id="content"> <div id="main"> Content </div> </div> <div id="footer"> Footer </div> </div>

Give #content a minimum height of 100% and set the height and reverse margin-top (same as height) for #footer. To protect the last element in #content from overlapping, set the bottom edge.

 #content { min-height: 100%; } #footer { height: 3em; margin-top: -3em; } #main { padding-bottom: 3em; /** height of #footer */ }

Here is an example:

http://jsfiddle.net/GB4vA/1/

Cameron Adams wrote an article about your problem. http://www.themaninblue.com/writing/perspective/2005/08/29/

+3
source

Js fiddle

 var shortContent = function() { if($(window).height() > $('body').height()) { $('footer').addClass('shortContent'); } }; (function(){ shortContent(); $(window).resize(function() { shortContent(); }); }());

tried js and did the job without a lot of css

@MichaB needs your jQuery m8 code

+2
source

In simple javascript:

 if (window.innerHeight > document.body.offsetHeight) { // code to make the footer stick to bottom }
+1
source 
 <script> function hideMe(id) { var box=document.getElementById(id); box.style.display="none"; } var bodyHeight=document.getElementById("body").offsetHeight, windowHeight=window.innerHeight; if(bodyHeight<windowHeight) { var footer= document.getElementById("footer"); footer.style.position="absolute"; footer.style.left="0px" footer.style.top=windowHeight-footer.offsetHeight+'px'; footer.style.width='100%'; } <script>

in HTML, just put id = "footer" in your footer. your welcome

+1
source

Try this css for footer

 position: fixed; bottom: 0

script: http://jsfiddle.net/A7DUK/

0
source

More articles:


All Articles