如何修复 v-content 的大小

Question

我有 2 个需要固定大小的 html 组件。 1 是v-list 另一个是可视化编辑器。如果v-list 太大，页面上会出现滚动条。为了解决这个问题，我需要设置 v-list max-height: 100% 但这不起作用，因为 v-content 会增长以适应其中的内容。如何将v-content max height 设置为初始页面高度（具有适当的填充），并且当内容在其中时不增长或缩小？

v-content with padding

v-content bad overflow

       <v-content class="main-content">
            <router-view/>
        </v-content>

<v-container pa-0 fluid fill-height>
        <v-layout column>
            <v-toolbar height="40px" color="white" flat>
                <v-btn to="/gitremote" depressed color="#00b259" class="white--text" small>Open</v-btn>
            </v-toolbar>

            <v-toolbar height="33px" color="white" flat>
                <v-breadcrumbs :items="breadcrumbs" divider="/"></v-breadcrumbs>
            </v-toolbar>

            <v-layout row>
                <v-flex xs2>
                    <v-card color="white" height="100%">
                        <v-list two-line>
                            <v-list-tile v-for="listitem in currentDirectoryItems" :key="listitem" avatar
                                         @click="navigateTo(listitem.itemType, listitem.itemId, listitem.name)">
                                <v-list-tile-avatar>
                                    <v-icon>{{listitem.icon}}</v-icon>
                                </v-list-tile-avatar>
                                <v-list-tile-content>
                                    <v-list-tile-title>{{listitem}}</v-list-tile-title>
                                    <v-list-tile-sub-title>{{listitem.subtitle}}</v-list-tile-sub-title>
                                </v-list-tile-content>
                                <v-list-tile-action>
                                    <!-- <CommandMenu
                                      v-bind:listItem="listitem"
                                      v-bind:commandsObject="gitRepoItemCommands"
                                      /> -->
                                </v-list-tile-action>
                            </v-list-tile>
                        </v-list>
                    </v-card>
                </v-flex>
                <v-flex>
                    <v-card>
                        EDITOR!!!!1
                    </v-card>
                </v-flex>
            </v-layout>
        </v-layout>
    </v-container>

Answer 1

一种选择是将页眉和页脚高度的总和“硬编码”到容器中：

 max-height: calc(100vh - 200px);
 overflow-y: auto;

其中200px 是页眉和页脚高度之和。

如果您的页眉和/或页脚具有可变高度，另一种选择是将它们全部包装到一个弹性框元素中，该元素限制为height: 100vh，具有flex-direction: column。

这里是它的要点：

.wrapper {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper>.header,
.wrapper>.footer {
  flex-grow: 0;
  flex-shrink: 0;
}

.wrapper>.content {
  flex-grow: 1;
  overflow-y: auto;
}
.test {
  height: 200vh;
}
/* the rest are styling details */
body {
  margin: 0;
}
.wrapper > * {
  padding: .5rem;
}
.wrapper > .header,
.wrapper > .footer {
  background-color: #eee;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.2), 0 0 2px 0 rgba(0,0,0,.14), 0 0 1px -2px rgba(0,0,0,.12)
}
* {
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="header">header<br>more header</div>
  <div class="content">
    <div class="test">some tall content...</div>
  </div>
  <div class="footer">footer<br>more footer<br>even more footer</div>
</div>

---

而且，显然，您还可以选择将.header 和.footer 与position:absolute（或fixed）放在一起，我不建议这样做，因为您需要动态更新顶部和底部.content 的填充以匹配页眉和页脚的高度。最后一个解决方案的另一个问题是您无法访问由页眉和页脚覆盖的滚动条部分，这对可访问性非常不利。

---

注意：提供一个runnableminimal reproducible example（此处或在codesandbox.io 中），我将帮助您将flexbox 解决方案应用于您的案例。