css - 使用 flex-column 仅滚动一个 flexbox 项目,而另一个保持固定
问题描述
我有一个 CodePen 在https://codepen.io/james-hudson3010/pen/dyMyVMg演示这个问题
我已经接近我想要的了……在列表滚动时,带有“切换列表”按钮的最顶部的项目保持固定。但是,当我到达列表的底部时,最上面的项目会向上移动。最上面的项目应该保持固定。
检查 flexbox 的高度,它是预期的高度。即它是身体的高度 - 页眉的高度 - 页脚的高度
我原以为 flex 项的高度将根据 flexbox 的高度来确定,但显然 flex 项可以不受限制地增长……这是真的吗?为什么?
JS:
new Vue({
el: '#app',
vuetify: new Vuetify(),
props: {
source: String,
},
data: () => ({
showList: true
}),
computed: {
filtered() {
var items = [];
for ( var i = 0; i < 15; i++ ) {
let newItem = {
'name': `Item ${i}`,
'comment': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut'
}
items.push( newItem );
}
console.log( items.length, " ]] ", items );
return items;
},
children() {
var children = [];
for ( var x = 0; x < 30; x++ ) {
let newChild = {
'name': `Item ${x}`
}
children.push( newChild );
}
console.log( children.length, " >> ", children );
return children;
}
}
})
HTML:
<div id="app">
<v-app id="inspire">
<v-app id="inspire" style="width: 100vw; height: 100vh;">
<v-app-bar app color="primary">
<v-btn text icon>
<v-icon>mdi-arrow-left</v-icon>
</v-btn>
<v-btn text icon>
<v-icon>mdi-arrow-right</v-icon>
</v-btn>
</v-app-bar>
<v-main style="height: 100%; width: 100%;">
<div class="d-flex flex-column align-stretch" style="height: 100%; width: 100%;">
<v-card class="pa-3 primary lighten-3" flat>
<v-btn class="ma-4" @click="showList = !showList">Toggle List</b-btn>
</v-card>
<v-card flat color="transparent" height="100%" width="100%" v-if="showList">
<v-virtual-scroll :item-height="100" :items="filtered" bench="50">
<template v-slot="{ item }">
<v-list-item>
<v-list-item-content>
<v-list-item-title style="background-color: lightgreen;">{{ item.name }}</v-list-item-title>
<v-list-item-subtitle class="text-wrap" style="background-color: lightyellow;">
{{ item.comment }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
</v-virtual-scroll>
</v-card>
<v-card width="100%" max-width="100%" height="100%" tile style="overflow: scroll;" v-else>
<div v-for="item in 50">Hello {{ item }}<br></div>
</v-card>
</div>
</v-main>
<v-footer app color="primary">
<v-img alt="Vue logo" height="40" width="40" max-height = "40" max-width = "40" contain />
</v-footer>
</v-app>
</v-app>
</div>
解决方案
代码中发生了很多事情。许多冲突和不必要的规则。但我知道你正在使用一个框架。
尝试添加这些 CSS 规则:
<v-card flat color="transparent" v-if="showList" style="height: 75%; flex: 1; overflow: scroll;">
推荐阅读
- c++ - 如何通过迭代器访问向量中的嵌套对?
- python - 使用 ASP .NET MVC 在文件 .py 中调用外部 python 函数
- c# - mysql c#中的图像重复#
- python-3.x - Djikstra 在 python3 中有 2 个因子
- php - 将图像android上传到mysql时出错
- docker - kubernetes:无法通过 ClusterIP / NodePort 访问 VirtualBox 集群上的服务
- android - 如何使用 ViewModel 和 LiveData 高效且频繁地查询 Room 数据库?
- r - 是否可以在 R 中为 data.frame 名称命名
- javascript - 如何将 Python FLASK 中的数据输入数据库?
- sql - 如何设计一个应对规模的教师-家长数据库?