将 div 放入页面内而不滚动

Question

我使用 flexbox 和 vuetify 创建了布局，其中卡片包含页眉和页脚，以及它们之间的可滚动内容。

这是codepen中的当前代码：

https://codepen.io/peter-peter-the-typescripter/pen/poyZmEm?editors=1010

我需要在高度上适合卡片（包括容器的填充）才能删除主页的滚动条。你能告诉我如何编辑代码以确保这一点吗？谢谢。

代码：

<div id="app">
  <v-app id="inspire">
    <v-container fluid style="height: 100%;">
      <v-row style="height: 100%">
        <v-col>
          <v-card>
            <v-row no-gutters style="height: 100%">
              <v-col class="no-gutters red" style="height: 100%; max-height: 100vh; flex-direction: column; display: flex;" cols="4">
                <!-- header -->
                <div style="flex-shrink: 0">
                  <v-toolbar>
                    <v-toolbar-title>
                      Toolbar Left
                    </v-toolbar-title>
                  </v-toolbar>
                </div>
                <!-- Scrollable area -->
                <div style="flex: 1; overflow-y: auto;">
                  <v-list>
                    <template v-for="item in 30">
                      <v-list-item :key="item">
                        <v-list-item-content>
                          <v-list-item-title v-html="'title ' + item"></v-list-item-title>
                        </v-list-item-content>
                      </v-list-item>
                    </template>
                  </v-list>
                </div>
                <!-- footer -->
                <div style="flex-shrink: 0">
                  <v-btn>Click me</v-btn>
                </div>
              </v-col>
            </v-row>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Answer 1

您需要获取容器的垂直填充，并将它们减去到您的max-height: 100vh 上的<v-col/>。如果容器的顶部和底部都有 12px 的填充，则您的最大高度应为 max-height: calc(100vh - 24px)。

<v-col
  ...
  style="max-height: calc(100vh - 24px);"
>
...
</v-col>

另外说明，与我的回答无关，您可以使用 Vuetify 的 flex utility classes，因此您不需要内联 flex 样式。

这是demo。我对其进行了一些清理并删除了额外的样式和元素。

Answer 2

我在 Codepen 上找到了解决方案。滚动条仍在显示，但已停用，我不确定这是 Codepen 独有的还是其他情况。

您需要给.container 或.container--fluid 和.col 一个padding: 0。导致问题的是垂直填充。

或者，如果您想在 HTML 中执行此操作，只需将 p-0 类添加到 container 和 col。

您可以在 here 找到更新后的 Codepen。