HTML5 make empty div full viewport size

Question

I’m trying to create an EMPTY div that takes up 100% of the viewport and that moves with the viewport (or position: fixed). It also needs to be at top: 0, left 0 of the viewport. This is for a browser extension so I need this div to be added over any page.

The background reason for this is so I can use the div as a full page tooltip that shows the mouse x and y positions and the tooltip follows the mouse.

How can this full page div be achieved? My many attempts have failed to create a div with any height.

I am away from my pc but can add what I’ve tried already soon.

Sorry it doesn’t work for an empty div (no child content). My div is completely contentless — ab_Dominoble_dev, Feb 06 '22 at 09:00
Most of the examples in the answers to that question have empty divs. — Ramesh Reddy, Feb 06 '22 at 09:03
https://jsfiddle.net/L5q0tmca/2/ - it does work, or one of the other 20 methods using `100vh` would also work. My guess is you forgot to add width and height to the HTML and body elements if it isn't working. — GrahamTheDev, Feb 06 '22 at 09:05
@Graham Ritchie I have added 100% to the document.body.height , Though I’m not sure how to reference html via JavaScript…. Is it document.height? — ab_Dominoble_dev, Feb 06 '22 at 09:09
`document.querySelector('html').style.height = "100%";`, you shouldn't really need this with `position: fixed` but it could be it is being overridden somewhere. — GrahamTheDev, Feb 06 '22 at 09:14

score 0 · Answer 1 · edited Feb 10 '22 at 12:34

0

Try this

{
  position: fixed;
  height: 100vh;
  width: 100vw;
}

edited Feb 10 '22 at 12:34

Super Kai - Kazuya Ito

22,221
10
124
129

answered Feb 06 '22 at 09:01

ara_ara_enjoyer

1
2

I have tried this but it positions the div after the page content, and after adding top: 0 it sets itself to 0 width …. Any other ideas? I’ll try it again when I’m at my PC – ab_Dominoble_dev Feb 06 '22 at 09:06

score 0 · Answer 2 · answered Feb 06 '22 at 09:12

0

Try this

{
position:absolute;
inset:0;
width:100vw;
height:100vh;
}

answered Feb 06 '22 at 09:12

Kartik Verma

34
5

Rabi Sankar · Answer 3 · 2022-02-06T17:03:20.297

Try this stylesheet and with some JavaScript code will help you to achieve a full page div.

#full-page-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: none
}

I have added the extra "overflow: none" because height may get more than browser window's height and we don't need to show the scrollbars.

Now, in the JavaScript code, we need to adjust the div height to the full page height, also need to add a handler to window "resize" event, so as to adjust that full page div height and width.

function ExtFullPageDivAdjust()
{
  let fullPageDiv = document.getElementById("full-page-div");
  fullPageDiv.style.height = Math.max(window.innerHeight, document.querySelector("body").clientHeight) + "px";
  fullPageDiv.style.width = window.innerWidth + "px";
}

ExtFullPageDivAdjust();
window.addEventListener("load", ExtFullPageDivAdjust);
window.addEventListener("resize", ExtFullPageDivAdjust);

Arefe · Answer 4 · 2022-02-06T10:38:26.960

0

first add an empty div to body then use this :

{position: fixed;
top: 0;
left: 0;
background: red;
right: 0;
z-index: 999999999;
bottom: 0;}

this pure css code is enough and you dont need any javascript even after resize.

edited Feb 06 '22 at 10:38

answered Feb 06 '22 at 10:33

Arefe

1
4

score 0 · Answer 5 · answered Feb 06 '22 at 10:51

.empty-div {
  position: fixed;
  inset: 0;
}

The inset property is a shorthand for top, right, bottom and left which will stretch the div to all corners.

In order to place the div at the very top, over everything else, it's best to insert the div at the very end of the page; just before the closing </body> tag.
To be on the safe side, you can also add z-index: 9999999.

HTML5 make empty div full viewport size

5 Answers5