I’ve got a Quasar layout, and a component which needs to employ 100% height of the q-page-container element. The problem is that the container does not fully expand to cover the entire height (unlike the drawer, which, using absolute positioning, does).
All CSS-tricks I’ve seen to tackle this problem interfere with the properties of the parent containers, which I’m reluctant to do to make sure I don’t break any properties necessary for internal Quasar layout. Setting the child
div of the container to
height: 100% has no impact, setting it to an absolute value such as
100px does correctly set the height, but I need it to adapt to the browser viewport.
I’ve set up a fiddle to illustrate the problem here, which looks something like this:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.min.css">
<q-layout view="hHh lpR fFf">
<q-header elevated class="bg-primary text-white">
<q-btn dense flat round icon="menu" @click="left = !left"> </q-btn>
<q-drawer v-model="left" side="left" bordered>
<!-- drawer content -->
<div id="troublemaker" style="background-color: green; height: 100px">
In this case I’d like
#troublemaker to fill entire height of it’s container - or rather it’s grandparent minus the header height, since the parent container simply expands to whatever content is inside.
PS: CSS layout and positioning have always seemed counter intuitive to me, so if anyone has some good advice on resources to learn how to better understand the logics of it I would appreciate it immensely!