Comment faire pour qu'un enfant Quasar q-page-container utilise toute la hauteur de ses grands-parents?
J'ai une disposition Quasar et un composant qui doit utiliser 100% de la hauteur de l'élément q-page-container. Le problème est que le conteneur ne se dilate pas complètement pour couvrir toute la hauteur (contrairement au tiroir, qui, en utilisant un positionnement absolu, le fait).
Toutes les astuces CSS que j'ai vues pour résoudre ce problème interfèrent avec les propriétés des conteneurs parents, ce que je suis réticent à faire pour m'assurer de ne pas casser les propriétés nécessaires à la disposition interne de Quasar. Définition de l'enfant div du conteneur sur height: 100% n'a aucun impact, en le définissant sur une valeur absolue telle que 100px définit correctement la hauteur, mais j'en ai besoin pour m'adapter à la fenêtre du navigateur.
J'ai installé un violon pour illustrer le problème ici .
Dans ce cas, je voudrais #troublemaker pour remplir toute la hauteur de son conteneur - ou plutôt ses grands-parents moins la hauteur de l'en-tête, car le conteneur parent se développe simplement en fonction du contenu.
PS: La mise en page et le positionnement CSS m'ont toujours semblé contre-intuitifs, donc si quelqu'un a de bons conseils sur les ressources pour apprendre à mieux comprendre les logiques de celui-ci, je l'apprécierais énormément!
Si vous avez un div à l'intérieur d'un q-page, J'ai trouvé la bonne façon de le faire est de laisser le div hériter du min-height Propriété CSS de q-page composant.
J'ai mis à jour le violon pour le montrer: https://jsfiddle.net/u39qbrpj/4/
#troublemaker {
min-height: inherit;
background-color: green;
}