No soy demasiado bueno con CSS, así que mucho de eso estoy en proceso de aprendizaje. Mi problema en este momento es que estoy tratando de hacer que mis componentes de reacción utilicen la altura completa de la ventana del navegador. Me he conformado con utilizar Display: 'grid' y gridTemplateRows: '1fr' para esto en este momento, pero tengo un efecto extraño.

Como puede ver arriba, 1FR parece utilizar solo un tamaño establecido, no el tamaño de página completo. Más abajo en la cadena después de iniciar sesión, también tendré cuadrículas de datos que necesitan utilizar el tamaño de la página, para que puedan cambiar su tamaño según sea necesario... pero el problema actual con el que me he encontrado es que los contenedores no son del tamaño del página, sino sólo el tamaño de los elementos del interior.

Intenté usar height:'100%' en diferentes partes, pero el problema persiste, ya que parece haber algo que configura el tamaño de los contenedores para que no sean del tamaño de una página, pero nunca configuré (como puede ver en el inspector a continuación) cualquier cosa para tener un tamaño de altura codificado de forma rígida.

EDICIÓN ACTUALIZADA: creé Index.css para su uso, que contiene un conjunto simple de:

 html, body {height: 100%;} #ReactRoot {min-height: 100vh;}

Intenté 2 cosas:

1. en el index.html en público, y el index.css en la misma carpeta pública, puse a probar y hacer que usara el CSS, pero no tuvo ningún efecto. No estoy seguro de dónde está mal en este caso.

2. en index.js, importé index.css (igual que arriba, pero ahora está en mi carpeta SRC), a través de

import "./index.css";

Esto tuvo este resultado. El div de nivel superior, ReactRoot, es de pantalla completa... todo lo que hay dentro, incluso con el 100 % de altura establecida en inline-css dentro de los módulos, no hace el 100 % de altura.

sin embargo, todo lo que está más abajo no parece obedecer la regla del 100%. Establecer CSS en línea en módulos a altura: "100%" no tuvo ningún efecto