css - 如何使div占用父容器的剩余高度

Question

我知道之前有人问过这个问题，但我找不到任何有效的解决方案。

我需要类为 .height 的 div 来获取父级的剩余高度

<div id="app">
  <v-app>
    <main>
      <v-content>
        <v-container fluid grid-list-xs>
          <v-layout row wrap>
            <v-flex xs6>
              <v-toolbar></v-toolbar>
              <div class="height"></div>
            </v-flex>
            <v-flex xs2></v-flex>
            <v-flex xs4></v-flex>
          </v-layout>
        </v-container>
      </v-content>
    </main>
  </v-app>
</div>

CSS

.height {
  display: flex;
  flex-flow: column;
  height: 100%;
  border: 1px solid orange;
}

CODEPEN 链接 https://codepen.io/anon/pen/bYGeMN

为什么 display flex + height 不能 100% 工作？

我正在使用 Vuetify 库在 VueJS 上获取 Material 设计主题，但我认为这个问题与 VueJS 无关，而是与 CSS 相关。

提前致谢

Answer 1

您需要确保 v-container 和 v-layout 的高度设置为 100%。此外，display: flex 和 flex-flow: column 需要在 xs6 而不是内部 div 上设置:

.container, .layout {
  height: 100%;
}

.xs6 {
  display: flex;
  flex-direction: column;
}

.height {
  flex: 1 1 auto;
}