Geek Answers Handbook

How to create a page size div?

Please note that I am not asking how to div size of the window or viewport for which there are many existing questions.

I have a webpage with some height and width, and I would like to add an empty top-level div (i.e. not one that contains the rest of the page) with a size exactly equal to the page height and width. In practice, I also want it to be at least the size of a viewport.

I know that I can do a one-time calculation of height and width in JavaScript:

 var height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight); var width = Math.max(document.body.scrollWidth, document.documentElement.clientWidth);

But this value may vary depending on the loading of images, or AJAX, or any other dynamic material that occurs on the page. I would like to somehow lock the size of the div at the full page size, so that it changes dynamically and on demand.

I tried something like the following:

 function resetFakeBg() { // Need to reset the fake background to notice if the page shrank. fakeBg.style.height = 0; fakeBg.style.width = 0; // Get the full page size. var pageHeight = Math.max(document.body.scrollHeight, document.documentElement.clientHeight); var pageWidth = Math.max(document.body.scrollWidth, document.documentElement.clientWidth); // Reset the fake background to the full page size. fakeBg.style.height = pageHeight + 'px'; fakeBg.style.width = pageWidth + 'px'; } // Create the fake background element. fakeBg = setFakeBgStyle(document.createElement('div')); document.body.appendChild(fakeBg); // Keep resizing the fake background every second. size_checker_interval = setInterval(resetFakeBg, 1000);

Limitations

This is for the Chrome extension, and I would like to limit my page modification to adding this single div . This means adding CSS to change the height and width of the html and / or body tags is undesirable since it can have side effects on the way the rest of the page is displayed.

Also, I don’t want to wrap an existing page in a div , because it might break some websites. Imagine, for example, a site created using the CSS selector body > div . I would like my extension to break as few sites as possible.

WHY VERY WHY I WANT TO DO IT?

Because some people like to keep their answers hostage until they are satisfied that I have Really Good Reason ™ for this:

This is for an accessibility-oriented Chrome extension that applies a CSS filter throughout the page. Recent versions of Chrome (> = 45) do not apply CSS filters to the backgrounds specified in the <html> or <body> . As a result, I decided to get around this limitation by copying the background of the page to a div with a very negative z-index value, so that it can be affected by the CSS filter for the entire page. For this strategy to work, the div must accurately mimic the way the page background is displayed for the user, which is the exact size of the document (and not larger) and at least fill the viewport.

+4
source share
4 answers

setInterval() is your best friend in cases where you want the .height() and .width() pointed out asynchronously all the time, which can be dynamically changed by user input and modifying the DOM tree. This is what I call the "page sniffer" and may work better than $(document).ready if you work in multiple languages ​​(PHP, XML, JavaScript).

Working example

0
source

You need to get away with adjusting the width and height in the function for resizing the window, you may want to add it to the download function when all the data / images are loaded.

-one
source

just add width = 100%

eg, -

Hello World
-one
source

I think you should do it like this:

 ... <body> <script> function height() {var height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);} function width() {var width = Math.max(document.body.scrollWidth, document.documentElement.clientWidth);} </script> <div height="height()" width="width()"> </div> </body> ...
-one
source

More articles:


All Articles