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

为什么显示器flex + height 100％不工作？

我正在使用Vuetify库在VueJS上获得材料设计主题，但我认为这个问题与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;
}

如何使div获取父容器的剩余高度

1 个答案: