How to make a q-page-container child use full height of its grandparent?
@metalsadman Thanks for input yet again! Yes, the q-page is correctly expanding, but what do I need to to do have a child
divexpand inside it?
patryckx last edited by
@Denton Have you tried using a div with a full-height class?
@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 last edited by 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>
Thank you for your reply, @patryckx !
window-heightclass 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-topas in my previous example remedies this, so I’ll stick with this solution for now.
Thank you all for your inputs!
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
@garlicbread, thanks. I was also googling for same reason and found this thread. Your solution works perfectly.
Stumbled on this while wrestling with the same problem. Just popped in to say thank you @garlicbread .
@garlicbread Yeah, but a
divwill 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>
See here: https://stackoverflow.com/a/59422841/1655734
items-strechclasses on the q-page solved the issue for me without
min-heighton any of the children.
I did have to set
width:100%on the direct child of q-page