How to get the entire width and height of a document (no jQuery)

Question

On a button click I want to make a div that is the entire width and height of the page. Not just the visible page but the entire rendered document.

So far I am using Javascript from this SO anser to calculate the height:

 var B = document.body,
     H = document.documentElement,
     height;
            if (typeof document.height !== 'undefined') {
                height = document.height;
            } else {
                height = Math.max( B.scrollHeight, B.offsetHeight, H.clientHeight, H.scrollHeight, H.offsetHeight );
            }
            var overlay = document.createElement('div');
            overlay.style.position = 'absolute';
            overlay.style.width = window.innerWidth + 'px';
            overlay.style.height = height + 'px';
            overlay.style.top = window.scrollY + 'px';
            overlay.style.left = 0;

However this does not always work. Sometimes when I am scrolled down to the bottom of the page the overlay starts lower on the page and extends the length of the document significantly. Sometimes it works right and sometimes it does not. I know there are ways to do this with jQuery but I do not want to use this.

Bonus points would be the best way to keep the overlay stretching across the entire screen width upon windows resize....Thanks

to have an element to overlay only the screen and stay there, then use : `el{position:fixed;top:0;left:0;height:100%;width:100%;}` you may allow it to scroll with `overflow:auto;` if needed. — G-Cyrillus, Aug 07 '14 at 19:49
If you just want a overlay I was gona suggest what GCyrillus said; http://jsfiddle.net/me2loveit2/6x9er14L/ — Philipp Werminghausen, Aug 07 '14 at 19:50
@Travisj, I looked at all these answers, most of which are old, and they did not work consistently. Wondering if there is a new and better method. — Startec, Aug 07 '14 at 19:50

score 1 · Accepted Answer · answered Aug 07 '14 at 19:55

1

You can use an approach where you place an element at the bottom right corner of the page and then look at the offset if the window changes sizes

var getDimensions = document.createElement("div");
getDimensions.setAttribute("style", "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
var Width = getDimensions.offsetLeft;
var Height = getDimensions.offsetTop;
window.onresize = function(){
 Width = getDimensions.offsetLeft;
 Height = getDimensions.offsetTop;
};

answered Aug 07 '14 at 19:55

Travis J

81,153
41
202
273

This looks pretty good to me. Why is it so hard to just calculate the damn width and height of the document? – Startec Aug 07 '14 at 19:59
@Startec - It gets complicated when the sizes change (or if you need to consider scrollbars which this accounts for). – Travis J Aug 07 '14 at 20:02

score 0 · Answer 2 · answered Mar 04 '15 at 08:36

Get the width in a cross browser/device way use:

function _getActualWidth()
{
    _actualWidth = window.innerWidth ||
                   document.documentElement.clientWidth ||
                   document.body.clientWidth ||
                   document.body.offsetWidth;

    return _actualWidth;
}

To get the height replace Width by Height. You can call these functions when a resize events is emitted and then set the new width and height to your overlay object.

score -1 · Answer 3 · answered Aug 07 '14 at 19:47

-1

Why not just use CSS viewport units instead of trying to calculate the viewport width and height?

        overlay.style.width = '100vw';
        overlay.style.height = '100vh';

answered Aug 07 '14 at 19:47

Steve Sanders

8,444
2
30
32

I'm going to study up on these, I didn't know they existed. These units are definitely a feature of CSS[1,2,3], not specific to Opera, correct? – abiessu Aug 07 '14 at 19:48
Here is why I wouldn't use those: They have bad browser support. Yes @abiessu, they are new to CSS3 but have the worst support of all new length properties. Even worse than `rem`s but they are going to be great for responsive text et al. – Startec Aug 07 '14 at 19:49
Yeah, it depends on what browsers you need to support. `vh` and `vw` works in IE9+. – Steve Sanders Aug 07 '14 at 19:52

How to get the entire width and height of a document (no jQuery)

3 Answers3