How to make a Quasar q-page-container child use full height of its grandparent?

Issue

I've got a Quasar layout, and a component that I need to fill 100% of the 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.

In this case I'd like #troublemaker to fill entire height of its container - or rather, its 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!

Solution

I think q-page-container need a q-page.

So just replace your div by a q-page and it's work. here is your fiddle fixed: https://jsfiddle.net/uab1rnjh/2/

Or if you really want to work with a div.
You can do the trick with css: height: calc(100vh - 50px);
Here is your fiddle with a div: https://jsfiddle.net/yghL6so8/2/

In the documentation, you can see QPageContainer encapsulates a QPage. at: https://quasar.dev/layout/page#QPageContainer-API

Answered By - H3r3zy