Geek Answers Handbook

Jquery $ (window) .height () and $ (document) .height () return the same

I need my background image to be below my div menu. So instead of applying the background to the body element, I put in another bg div that contains my body div and sets the width to 100%. (My body has a specified width div). I set the background inside the bg div.

I tested it and I got half of the background image because the document was not long enough. Therefore, I am trying to make a javascript fix for this.

<!DOCTYPE HTML> ..... <script type="text/javascript" src="jquery-min.js"></script> <script type="text/javascript"> function setDocumentSize() { alert($(window).height()); alert($(document).height()); if ($(window).height()>$(document).height()) { var height = $(window).height()-$(document).height(); document.getElementById('bg').style.height=height+"px" } } ..... </script> ..... <body onload="setDocumentSize()"> <div class="menu"> ..... </div> <div class="bg"> <div class="body"> .....(background in this div) </div> </div>

Now both warnings appear with the height of the viewport. Therefore, nothing happens.

I am using Firefox 16.0.2

Here is the link to the actual page http://servapps.dyndns-work.com/abstract/

+4
source share
2 answers

This can be done in CSS. You must ensure that all contained elements do not exceed the height of the page ( height: 100% ). This includes both html and body elements.

This code should work with your site:

 html, body, #bg { height: 100%; }
+1
source

Another reason this can happen is when the doctype declaration ( <!DOCTYPE html> ) is missing. Adding this fixes $(window).height() to return the correct viewport height.

+5
source

More articles:


All Articles