CODEWITHSUNDEEP
javascriptdomhtml
puzzledchamp
puzzledchamp

Reputation: 53

Height and width of complete webpage

I am trying to get the height and width of complete webpage regardless of the viewport.

That is, even if the browser is not maximized, I need to know what the complete size of the webpage is.

Methods I have looked at include document.body.clientWidth/clientHeight, innerHeight/Width etc. But they all change when the browser is made smaller.

Please help! Thanks!

Upvotes: 0

Views: 695

Answers (2)

boombox
boombox

Reputation: 2456

--EDIT-- I think I have a better idea of what you want. Check out the scrollHeight and scrollWidth properties.

document.getElementById('width').innerHTML = document.body.scrollWidth;
document.getElementById('height').innerHTML = document.body.scrollHeight;
scroll width is: <div id="width"></div>
scroll height is: <div id="height"></div>

Check out the properties for the screen object.

availHeight and availWidth return the screen height and width in pixels that are available to the window (excluding interface features such as the taskbar).

These values do not change even if you resize the window of your browser. Try out the snippet below:

document.getElementById('width').innerHTML = screen.availWidth;
document.getElementById('height').innerHTML = screen.availHeight;
width is: <div id="width"></div>
height is: <div id="height"></div>

Upvotes: 0

jdphenix
jdphenix

Reputation: 15415

You are looking for getComputedStyle(). It returns an object which you can query the width and height properties. 

getComputedStyle(document.body).width;

Of note, if a page has a layout which changes with the viewport size, the result of this call will change. However, if the client becomes so small as to need to scroll, the returned result still be the actual width of the <body>.

Methods I have looked at include document.body.clientWidth/clientHeight, innerHeight/Width etc. But they all change when the browser is made smaller.

And the reason this is true is because the window size is mutable and layouts will change based upon the window size.

Upvotes: 1

Related Questions