CODEWITHSUNDEEP
javascriptjquerycssresizeheight
serv92
serv92

Reputation: 121

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

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

I tested it and I got half a background picture because the document was not long enough. So I'm attempting 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 alerts pop up with the viewport height. Therefore nothing happens.

I'm using Firefox 16.0.2

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

Upvotes: 4

Views: 4362

Answers (2)

Thava
Thava

Reputation: 1665

One more reason this could fail is when the doctype declaration (<!DOCTYPE html>) is missing. Adding this fixes the $(window).height() to return proper viewport height.

Upvotes: 5

Scott Bartell
Scott Bartell

Reputation: 2840

This can be done in CSS. You need to make sure that all containing elements are at least the height of the page (height: 100%). This includes both the html and body elements.

This code should work with your website:

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

Upvotes: 1

Related Questions