Quasar: Carousel not able to go full height in page due to q-page not defining height

[gecko-8]

I'm building an app that has a q-carousel embedded inside a q-page. The problem is that no matter what I try, I can't get the carousel to go 100% height. I'm 99% sure I've narrowed down the issue to the q-page only defining it's min-height and not height. I've reproduced the issue in this fiddle https://jsfiddle.net/MaelstromCdn/coctcox1/5/. You'll see that the carousel is squished up against the top but if you add style="height: 100vh;" to the q-page tag it works fine. The min-height value is obviously calculated based on what other page elements are visible so I'm not comfortable creating a pull request as I'm just getting started with Quasar.

For reference, here's my full page code:

<template>
  <q-page>
    <q-carousel :autoplay="5000" quick-nav infinite class="full-height">
        <q-carousel-slide class="flex flex-center">Slide 1</q-carousel-slide>
        <q-carousel-slide class="flex flex-center">Slide 2</q-carousel-slide>
        <q-carousel-slide class="flex flex-center">Slide 3</q-carousel-slide>
    </q-carousel>
  </q-page>
</template>

<script>
export default {
  name: 'PageWelcome',
}
</script>

<style scoped lang="stylus">
</style>

And my versions:

Operating System                Darwin(17.5.0) - darwin/x64
NodeJs                          8.11.1

Global packages
  NPM                           5.8.0
  yarn                          Not available
  quasar-cli                    0.15.14
  vue-cli                       2.9.3
  cordova                       7.0.1

Important local packages
  quasar-cli                    0.15.14 (Quasar Framework CLI)
  quasar-framework              0.15.10 (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
  quasar-extras                 1.0.2   (Quasar Framework fonts, icons and i18n.)
  vue                           2.5.16  (Reactive, component-oriented view layer for modern web interfaces.)
  vue-router                    3.0.1   (Official router for Vue.js 2)
  vuex                          3.0.1   (state management for Vue.js)
  electron                      Not available
  babel-core                    6.26.0  (Babel compiler core.)
  webpack                       3.11.0  (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
  webpack-dev-server            2.11.1  (Serves a webpack app. Updates the browser on changes.)

Thanks in advance!
Jason

[pinghe]

using class="absolute-full"

[gecko-8]

That does seem to solve the issue but still feels a bit awkward. I think the fix to q-page makes more sense but I might be missing other repercussions. Thanks @pinghe !

[mesqueeb]

@gecko-8 I have exactly the same issue.
I need an option to be able to have the height set instead of the min-height.

Look at my problem:

Here is the pen:
https://codepen.io/mesqueeb/pen/aGeKjm

[gecko-8]

@mesqueeb I'd speculate your issue isn't with Quasar (since you're not using any Quasar directives) but with using a grid inside a flexbox container. Unfortunately, I haven't had any experience with the grid directives so can't give any advice there. Your best bet would probably be to post it on StackOverflow.

[rstoenescu]

<!-- <q-page :style-fn="myStyle" ...> -->

myStyle (offset) {
  const size = `calc(100vh - ${offset}px)`
  return {
    minHeight: size,
    height: size
  }
}