Question

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

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

一种选择是“硬编码”页眉和页脚的高度之和以提供您的容器：

import ast
my_dict = ast.literal_eval(df.loc[0]['properties') 

for key in my_dict.keys():
    data[key] = data['properties'].str[0].str[key]

其中max-height: calc(100vh - 200px); overflow-y: auto;是页眉和页脚高度的总和。

如果页眉和/或页脚的高度可变，则另一种选择是将它们全部包装到一个受限制的200px具有height: 100vh的flexbox元素中。

这是要点：

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的顶部和底部填充，以匹配页眉和页脚的高度。最后一个解决方案的另一个问题是您无法访问滚动条的由页眉和页脚覆盖的部分，这确实对可访问性不利。

注意：提供一个可运行 minimal reproducible example（在此处或在codeandbox.io中），我将帮助您为您的案例应用flexbox解决方案。

如何确定v内容的大小

1 个答案: