$(window).height() vs $(document).height

Jquery

Jquery Problem Overview


I am having problem of getting wrong height with

$(window).height();

and got the similar question here

In my case when I try

$(document).height();

it seems to return me correct result

window height returns 320

while document height returns 3552!

I found this question too

But in my case window already gets loaded completely as I am calling height function after few ajax operations

So what is the best way to know the height of the current window?

Edit:

enter image description here enter image description here

Jquery Solutions


Solution 1 - Jquery

Well you seem to have mistaken them both for what they do.

$(window).height() gets you an unit-less pixel value of the height of the (browser) window aka viewport. With respect to the web browsers the viewport here is visible portion of the canvas(which often is smaller than the document being rendered).

$(document).height() returns an unit-less pixel value of the height of the document being rendered. However, if the actual document’s body height is less than the viewport height then it will return the viewport height instead.

Hope that clears things a little.

Solution 2 - Jquery

This fixed me

var width = window.innerWidth;
var height = window.innerHeight;

Solution 3 - Jquery

AFAIK $(window).height(); returns the height of your window and $(document).height(); returns the height of your document

Solution 4 - Jquery

jQuery $(window).height(); or $(window).width(); is only work perfectly when your html page doctype is html

<!DOCTYPE html>
<html lang="en">
...

Solution 5 - Jquery

you need know what it is mean about document and window.

  1. The window object represents an open window in a browser.click here
  2. The Document object is the root of a document tree.click here

Solution 6 - Jquery

$(document).height:if your device height was bigger. Your page has Not any scroll;

$(document).height: assume you have not scroll and return this height;

$(window).height: return your page height on your device.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPawan NogariyaView Question on Stackoverflow
Solution 1 - JquerySayanView Answer on Stackoverflow
Solution 2 - JqueryAshraf Bin AkbarView Answer on Stackoverflow
Solution 3 - Jquerygamehelp16View Answer on Stackoverflow
Solution 4 - JqueryMRRajaView Answer on Stackoverflow
Solution 5 - JqueryzsytsskView Answer on Stackoverflow
Solution 6 - JqueryYziaFromIranView Answer on Stackoverflow