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



  • 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!



  • 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



  • 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>
    


  • @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



  • @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?



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

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



  • @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>
    


  • @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:

    0e2501c6-1ae1-458a-8781-0f968b1ad83d-image.png



  • 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!


Log in to reply