Nunca me había pasado esto antes y no puedo entender por qué está pasando esto. Estoy trabajando en React. Básicamente tengo un componente principal con el css de su cuerpo:
body { width: 100%; height: 100% }De esa manera puedo trabajar con porcentajes en mi proyecto. Mi componente hijo tiene
#Navbar { width: 100%; height: 10%; background-color: black; }Pero no puedo ver el componente secundario excepto si establezco su posición en absoluto. ¿Alguien tiene alguna idea de por qué sucede esto? ¡Gracias de antemano por cualquier ayuda!
En CSS, el body se refiere a document.body, no al cuerpo de un componente. No sé si puede establecer el ancho y la altura en document.body... realmente no tiene ningún sentido, ya que el cuerpo es el elemento superior visible en el dom.
Establecer altura = 80% o ancho = 90% o lo que tenga sentido para dimensionar un elemento que está dentro de otro elemento. Pero el cuerpo no tiene parentNode como tal.
¿Tu componente tiene contenido?
.body hace referencia al cuerpo del HTML, no a su componente. Tienes que darle una identificación o nombre de clase para que funcione
También recomendaría usar el nodo html <nav> y simplemente hacerlo, ya que es semánticamente más correcto
nav { color: red; etc... }No estoy muy familiarizado con reaccionar, pero tal vez intente establecer la propiedad de contenido #Navbar. Esto debería funcionar para Vanilla CSS y espero que React también:
#Navbar { width: 100%; height: 10%; background-color: black; content: "" }Espero que esto ayude ;)