时间戳

首页 > 解决方案 > 基本的 Vuetify 布局问题。我正在努力阻止 3 个 flex 元素扩展超过屏幕高度

layout - 基本的 Vuetify 布局问题。我正在努力阻止 3 个 flex 元素扩展超过屏幕高度

问题描述

我在使用 vuetify 布局网格时遇到了一些问题。

我的组件内的 v-layout 中有 3 个 v-flex 元素。一个是工具栏（顶部），一个是内容（中），另一个是操作栏（底部）

当里面的内容扩展到任何高度时，我需要内容（中间）v-flex 不会将底部的一个推离屏幕，它需要保持里面没有内容时的大小。即 12 行中的 10 行。所有 3 应保持原位。

app.vue 的布局是

<v-content app :dir="appDirection">
  <v-container fluid fill-height>
    <v-layout column >
      <v-flex xs12>
        <router-view/>
      </v-flex>
     </v-layout>
  </v-container>
</v-content>

在路由器视图中，我有一个页面

<v-layout>
  <v-navigation-drawer></v-navigation-drawer>
  <my-component></my-component> 
</v-layout>

在我的组件中，我有：

<v-layout column>
  <v-flex xs1 sm1 md1 lg1> //TOOLBAR(top)
      <v-toolbar></v-toolbar>
  </v-flex>

  <v-flex xs10 sm10 md10 lg10 > //CONTENT(middle)
      <ul>
          <v-infinite-scroll> should inherit dimensions and scroll
          </v-infinite-scroll>
      </ul>
  </v-flex>
  <v-flex xs1 sm1 md1 lg1>//ACTIONBAR(bottom)
      <v-text-field></v-text-field>
  </v-flex>
</v-layout>

如果有人知道如何实现这一点，您的帮助将不胜感激。

标签： layoutvue.jsvuetify.js

解决方案

您需要首先了解v-flexinside如何v-layout与 prop 一起column工作。

设置 Column 属性时。v-flex采用可用高度（不是屏幕高度/内容高度）并将其划分为 12 点网格系统。

您需要做的就是放置容器的高度（此处v-layout）。这将解决你的问题。

我希望它有所帮助。

推荐阅读