时间戳

首页 > 解决方案 > vuetifyjs网格列的全高并在溢出时滚动

css - vuetifyjs网格列的全高并在溢出时滚动

问题描述

我正在尝试使用其网格系统填写<v-content>vuetifyjs 应用程序的内容。如何填写列以占用所有可用空间并将溢出滚动到某些单元格？

在此处输入图像描述

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
.grid-item-blue {
  background-color: lightblue;
}

.grid-item-green {
  background-color: lightgreen;
  overflow-y: scroll;
}

.grid-item-pink {
  background-color: pink;
  height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-app-bar app fixed dark>
      <v-toolbar-title>Toolbar</v-toolbar-title>
    </v-app-bar>
    <v-content>
      <v-container fluid fill-height pa-0>
        <v-row no-gutters class="top-row">
          <v-col cols="9" class="grid-item-blue">fill screen</v-col>
          <v-col cols="3" class="grid-item-green">independent vertical scroll
          </v-col>
        </v-row>
        <v-row no-gutters class="bottom-row">
          <v-col cols="12" class="grid-item-pink">fixed height, always on bottom</v-col>
        </v-row>
      </v-container>
    </v-content>
    <v-footer app dark>
      <span>Footer</span>
    </v-footer>
  </v-app>
</div>

这就是我使用 css 网格的方式。

<div class="grid">
    <div class="grid-item-blue">fill screen</div>
    <div class="grid-item-green">independent vertical scroll</div>
    <div class="grid-item-pink">fixed height, always on bottom/</div>
</div>

.grid {
  height: calc(100vh - 64px - 36px);
  display: grid;
  gap: 10px;
  grid-template-columns: 9fr 3fr;
  grid-template-rows: 1fr 100px;
}

.grid-item-blue {
  background-color: lightblue;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.grid-item-green {
  background-color: lightgreen;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  overflow-y: scroll;
}

.grid-item-pink {
  background-color: pink;
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

标签： cssflexboxvuetify.jscss-grid

解决方案

  1. 使容器成为 flexbox 容器。
  2. flex-grow:0;关于第二个元素。
  3. flex-grow:1;在第一个元素上。

步骤1：

<v-container fluid fill-height pa-0>

变成：

<v-container fluid pa-0 class="d-flex flex-column flex-grow-1 fill-parent-height">

最后一个类，是一个简单的自定义类.fill-parent-height{ height:100%; }

第2步：

<v-row no-gutters class="top-row">

变成：

<v-row no-gutters class="top-row flex-grow-1 flex-shrink-1">

第 3 步：

<v-row no-gutters class="bottom-row">

变成：

<v-row no-gutters class="bottom-row flex-grow-0 flex-shrink-0">

演示

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
.grid-item-blue {
  background-color: lightblue;
}

.grid-item-green {
  background-color: lightgreen;
  overflow-y: scroll;
}

.grid-item-pink {
  background-color: pink;
  height: 100px;
}
.grid-item-green>p{
    height:9000px;
    border:10px solid;
    margin:20px;
}

.fill-parent-height {
  height: 100%;
}

.top-row{
    min-height: 0;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-app-bar app fixed dark>
      <v-toolbar-title>Toolbar</v-toolbar-title>
    </v-app-bar>
    <v-content style="height:100vh">
      <!-- <v-container fluid fill-height pa-0> -->
      <v-container fluid pa-0 class="d-flex flex-column flex-grow-1 fill-parent-height">
        <!-- <v-row no-gutters class="top-row"> -->
        <v-row no-gutters class="top-row flex-grow-1 flex-shrink-1">
          <v-col cols="9" class="grid-item-blue fill-parent-height">
              fill screen
          </v-col>
          <v-col cols="3" class="grid-item-green fill-parent-height">
              independent vertical scroll
              <p>long element</p>
          </v-col>
        </v-row>
        <!-- <v-row no-gutters class="bottom-row"> -->
        <v-row no-gutters class="bottom-row flex-grow-0 flex-shrink-0">
          <v-col cols="12" class="grid-item-pink">fixed height, always on bottom</v-col>
        </v-row>
      </v-container>
    </v-content>
    <v-footer app dark>
      <span>Footer</span>
    </v-footer>
  </v-app>
</div>

编辑：

为了使绿色元素可滚动，我们需要从 html 向下传播高度或在任意容器元素上使用视口单位，我选择了<v-content style="height:100vh">

我更新了上面的演示。

推荐阅读