9

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!

Ryan
  • 29
  • 1
  • 4
Denton
  • 93
  • 1
  • 1
  • 4

3 Answers3

14

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;
}
dalys
  • 141
  • 1
  • 2
  • This is useful! Somehow, however, my QScrollArea needs `height` set instead of `min-height` in order for its contents (a QTable) to appear. The parent QPage, however, apparenty uses `min-height`. I now know how to inherit `min-height`, but can I somehow set `height` to `min-height`? Or should I approach this differently? – hans_meine Jun 25 '20 at 07:09
  • 1
    I actually found the solution myself by studying https://codepen.io/cp-tof06/pen/bGdKXpW Instead of style attributes, I am now using `class="column full-height"` on the QScrollArea. Apparently, the flex layout then makes it all magically working (just using `col` classes on the QScrollArea and QTable within, without any style attributes). – hans_meine Jun 25 '20 at 08:05
8

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

H3r3zy
  • 86
  • 7
  • 1
    Thank you for your suggestion! This works for the `q-page` element, but if I'm including another component, this comes with it's *own* `div`, which I cannot specify as a `q-page` without internally modifying the component itself. Also, using the CSS helper classes `fit` and `full-height` does not work. `style='height: 100vh; padding-top: -50px;'` seems to do the trick though, in this particular case. Is that a viable solution? – Denton Jul 26 '19 at 07:16
  • The above should be `margin-top`, not `padding-top`. – Denton Jul 26 '19 at 07:50
  • You can do the trick by doing `height: calc(100vh - 50px);` Here is a fiddle to explain: https://jsfiddle.net/yghL6so8/2/ – H3r3zy Jul 26 '19 at 11:25
  • This is pretty cool! How did I miss this all this time? I think this comprises the cleanest solution to this issue. – Denton Aug 04 '19 at 10:21
  • This is a winner: .google-map { width: 100%; height: calc(100vh - 50px); margin: 0 auto; background: gray; position: none; } – bkomac Sep 23 '19 at 16:49
  • This will only work if you set your Navigation Header to 50px. However if you have another sizes you cannot stay consistent here. Keep that in mind to have a workaround with $variables or smth else. – Gkiokan Aug 09 '20 at 10:05
0

Using a q-page inside a q-page-container is certainly the most common way. Per the doc a q-page must be in a q-page container. However, if you want to put a div in a container and have it fill the container you can use class="fit" and the div will fill the entire container.

julie
  • 172
  • 1
  • 6