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

Question

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!

Answer 1

If you have a div inside a q-page, I found the proper way to do this is to let the div inherit the min-height CSS property from the q-page component.

I updated the fiddle to show it: https://jsfiddle.net/u39qbrpj/4/

#troublemaker {
  min-height: inherit;
  background-color: green;
}

Answer 2

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