Estoy tratando de crear un div VACÍO que ocupe el 100% de la ventana gráfica y que se mueva con la ventana gráfica (o posición: fija). También debe estar en la parte superior: 0, a la izquierda 0 de la ventana gráfica. Esto es para una extensión del navegador, por lo que necesito que se agregue este div en cualquier página.
La razón de fondo de esto es que puedo usar el div como una información sobre herramientas de página completa que muestra las posiciones x e y del mouse y la información sobre herramientas sigue al mouse.
¿Cómo se puede lograr este div de página completa? Mis muchos intentos han fallado para crear un div con cualquier altura.
Estoy lejos de mi PC, pero puedo agregar lo que ya probé pronto.
Prueba esto
{ position: fixed; height: 100vh; width: 100vw; }Prueba esto
{ position:absolute; inset:0; width:100vw; height:100vh; }Pruebe esta hoja de estilo y, con un poco de código JavaScript, lo ayudará a lograr una división de página completa.
#full-page-div { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: none }He agregado el "desbordamiento: ninguno" adicional porque la altura puede ser mayor que la altura de la ventana del navegador y no necesitamos mostrar las barras de desplazamiento.
Ahora, en el código JavaScript, necesitamos ajustar la altura del div a la altura de la página completa, también necesitamos agregar un controlador al evento de "cambio de tamaño" de la ventana, para ajustar la altura y el ancho del div de la página completa.
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);