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

Denton

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">
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.umd.min.js"></script>

<div id="q-app">
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="left = !left"> </q-btn>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-drawer v-model="left" side="left" bordered>
      <!-- drawer content -->
    </q-drawer>

    <q-page-container>
      <div id="troublemaker" style="background-color: green; height: 100px">
      </div>
    </q-page-container>

  </q-layout>
</div>

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!

metalsadman

I think you what you need is qpage as direct child of qpagecontainer. https://quasar.dev/layout/layout#Usage
https://quasar.dev/layout/page#Usage

Denton

Thanks for the quick response!

You are right, a q-page will indeed span the whole region. But still if I wrap the div#troublemaker inside a q-page, I’m unable to make use of 100% height - as in this updated fiddle: https://jsfiddle.net/udkg82cr/1/

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.umd.min.js"></script>

<div id="q-app">
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="left = !left"> </q-btn>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>
    </q-header>
    <q-drawer v-model="left" side="left" bordered>
      <!-- drawer content -->
    </q-drawer>

    <q-page-container>
      <q-page style="background-color: pink;">
        <div id="troublemaker" style="background-color: green; height: 100%;">
        </div>
      </q-page>
    </q-page-container>

  </q-layout>
</div>

metalsadman

@Denton in my experience i just give the q-page a padding prop https://quasar.dev/layout/page#QPage-API and it will take the rest, try to see the style-fn in the docs tho https://quasar.dev/layout/page#Style-fn

Denton

@metalsadman Thanks for input yet again! Yes, the q-page is correctly expanding, but what do I need to to do have a child div expand inside it?

patryckx

@Denton Have you tried using a div with a full-height class?

https://quasar.dev/style/other-helper-classes#Size-Related

Denton

@patryckx Thank you for your input! And indeed I have, and it has no effect.

I found the following to work in this particular setup, but I’m thinking there should be a better way of doing it:

<div id="troublemaker" style="background-color: green; height: 100vh; margin-top: -50px;"></div>

patryckx

@Denton I’m sorry for the late reply.
I did it here in your example, and it worked:

   <q-page-container>
      <q-page style="background-color: pink;">
       <div class="window-height" style="background: green">
         Test
       </div>
      </q-page>
    </q-page-container>

Result:

Denton

Thank you for your reply, @patryckx !

Essentially the window-height class implements a height: 100vh, which means (with the header of 50px) it will expand beyond the actual size of the component. Appending a negative margin-top as in my previous example remedies this, so I’ll stick with this solution for now.

Thank you all for your inputs!

garlicbread

Just a quick note since I stumbled across this thread when googling for the same reason
The best answer seems to be to use the following on the div inside the qpage

style="min-height: inherit;"

matejmohar

@garlicbread, thanks. I was also googling for same reason and found this thread. Your solution works perfectly.

lambdachop

Stumbled on this while wrestling with the same problem. Just popped in to say thank you @garlicbread .

Narmer23

@garlicbread Yeah, but a div inside that div will have the same problem… I have a slot defined in the QPage, whenever I implement something in the slot, the problem reappears.

<q-page padding>
    <div style="min-height: inherit">
      <slot name="content"></slot> <!-- even with full-height this slot won't get 100% -->
    </div>
</q-page>

danbars

See here: https://stackoverflow.com/a/59422841/1655734
row and items-strech classes on the q-page solved the issue for me without min-height on any of the children.
I did have to set width:100% on the direct child of q-page

No More Posting New Topics!

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