css 如果不可能达到100vh的高度，如何将固定头支柱应用于v形工作台？

qfe3c7zg 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(113)

我正在使用Vuetify，在表格上方有一些内容。表格应该有fixed-header，但这需要height属性。100%的高度不起作用，我无法使用100vh，因为我在上方有一些内容。
生殖环节

<template>
  <v-app>
    <v-main>
      <v-alert type="info" title="some other content goes here" />
      <v-table :fixed-header="true" height="100%"> <!-- height=100% doesn't work -->
        <thead>
          <tr>
            <th>Header</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="i in 100">
            <td>x</td>
          </tr>
        </tbody>
      </v-table>
    </v-main>
  </v-app>
</template>

你有什么想法如何设置一个固定的割台与正确的高度？

css

来源：https://stackoverflow.com/questions/75302652/how-to-apply-fixed-header-prop-to-v-table-if-height-of-100vh-is-not-possible

1条答案

按热度按时间

svujldwt1#

您可以使用带有一点flex的100vh。

- 模板：**

<v-app>
    <v-main>
      <v-alert type="info" title="some other content goes here" />
      <v-table :fixed-header="true" height="100vh">
        <thead>
          <tr>
            <th>Header</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="i in 100">
            <td>x</td>
          </tr>
        </tbody>
      </v-table>
    </v-main>
  </v-app>

- 款式：**

.v-main {
    display: flex;
    flex-direction: column;
  }
  
  .v-main > * {
    flex: auto !important;
  }
  
  .v-table {
    flex-grow: 1;
  }

- 示例：**https://codepen.io/alexpetergill/pen/wvxYXyy/e586873420cc89fc2f14a97bd503d8fa

赞(0）回复(0）举报 2023-02-01

我来回答

css 如果不可能达到100vh的高度，如何将固定头支柱应用于v形工作台？

1条答案

相关问题

热门标签

最新问答