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.
Try this
{
position: fixed;
height: 100vh;
width: 100vw;
}
Try this
{
position:absolute;
inset:0;
width:100vw;
height:100vh;
}
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);