title: How to make a Quasar q-page-container child use full height of its grandparent?
body: <p>I've got a Quasar layout, and a component that I need to fill 100% of the height of the <code>q-page-container</code> element. The problem is that the container does not fully expand to cover the entire height (unlike the drawer, which, using absolute positioning, does).</p>
  
  <p>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 <code>div</code> of the container to <code>height: 100%</code> has no impact, setting it to an absolute value such as <code>100px</code> does correctly set the height, but I need it to adapt to the browser viewport.</p>
  
  <p>I've set up a fiddle to illustrate <a href="https://jsfiddle.net/u7kd9nyq/5/" rel="nofollow noreferrer">the problem here</a>.</p>
  
  <p>In this case I'd like <code>#troublemaker</code> 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.</p>
  
  <p><em>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!</em></p>