PROBLEMA
Solo pude encontrar respuestas que muestren cómo usar vw/vh para obtener el tamaño actual de la ventana , que no es lo que necesito.
LO QUE REALMENTE NECESITO
Necesito el ancho completo de la pantalla del monitor independientemente de si la ventana del navegador está maximizada o no.
¿Hay alguna manera de hacer esto usando CSS puro? Si no, ¿se puede hacer usando JavaScript + CSS? ¿Si es así, cómo?
CSS solo puede proporcionarle el ancho de la ventana gráfica, es decir, el ancho de la ventana. Sin embargo, puede usar screen.width para obtener el ancho de la pantalla con JavaScript.
console.log(screen.width);¿Desea que el contenido de una etiqueta ocupe todo el espacio de la pantalla o desea obtener específicamente el valor de alto y ancho en píxeles? Si es la primera opción, creo que he encontrado una solución.
* { margin: 0; padding: 0; box-sizing: border-box; } main { background: blue; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main></main> <script src="./script.js"></script> </body> </html>otra forma de resolverlo sería usando los valores de anchura interior y altura interior de la ventana
const width = window.innerWidth; const height = window.innerHeight; const main = document.querySelector("main"); main.style.width = `${width}px`; main.style.height = `${height}px`; * { margin: 0; padding: 0; box-sizing: border-box; } main { background: blue; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main></main> <script src="./script.js"></script> </body> </html>Se utilizó una referencia: https://tutorial.tips/how-to-get-viewport-width-and-height-using-javascript/