末尾看不到滚动条
我有以下基于vuejs和vuetify的Web应用程序：
new Vue({
el: '#app',
vuetify: new Vuetify(),
})body {
overflow: hidden;
height: 100vh;
}
.stretch {
height: 100%;
width: 100%;
}
.output {
height: 100vh;
width: 100%;
overflow-y: scroll;
}<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-app-bar color="deep-purple accent-4" dark app>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Page title</v-toolbar-title>
</v-app-bar>
<!-- Sizes your content based upon application components -->
<v-content>
<!-- Provides the application the proper gutter -->
<v-container class="pa-0 stretch" fluid>
<v-row class="mb-5" justify="center">
<v-card max-width="280">
<v-list-item>
<v-list-item-icon>
<v-icon large color="teal darken-2">mdi-email</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="headline">Messages</v-list-item-title>
<v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-text>
<v-row align="center" justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM1</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">1111111111</p>
</v-col>
</v-row>
<v-row justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM2</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">111111111</p>
</v-col>
</v-row>
</v-card-text>
</v-card>
<v-card max-width="280">
<v-list-item>
<v-list-item-icon>
<v-icon large color="teal darken-2">mdi-email</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="headline">Messages</v-list-item-title>
<v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-text>
<v-row align="center" justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM1</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">1111111111</p>
</v-col>
</v-row>
<v-row justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM2</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">111111111</p>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-row>
<v-row no-gutters class="output" justify="center">
<v-col cols="7">
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
如您所见：
我可以向下滚动，但不能滚动到方框末尾。我用红色边框标记了它。
具体缺少什么？在JSFiddle上更清楚：
https://jsfiddle.net/zero_coder/1k4bt9jm/4/。 别忘了按Run键！
我想避免整个页面的滚动，而只提供滚动
<v-row no-gutters class="output" justify="center">阻止。
2 个答案:
答案 0 :(得分：2)
这是我的解决方法。
您只需要从.output的100vh高度减去所有其他元素的高度
在这里我们假设您的其他元素高度为275px，因此您只需要像下面这样从275px减去100vh(.output)
.output{
height:calc(100vh - 275px);
}
现在您只需要找出所有其他元素的高度，例如v-app-bar，v-row等。
new Vue({
el: '#app',
vuetify: new Vuetify(),
})body {
overflow: hidden;
height: 100vh;
}
.stretch {
height: 100%;
width: 100%;
}
.output {
height: calc(100vh - 275px);
width: 100%;
overflow-y: scroll;
}<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-app-bar color="deep-purple accent-4" dark app>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Page title</v-toolbar-title>
</v-app-bar>
<!-- Sizes your content based upon application components -->
<v-content>
<!-- Provides the application the proper gutter -->
<v-container class="pa-0 stretch" fluid>
<v-row class="mb-5" justify="center">
<v-card max-width="280">
<v-list-item>
<v-list-item-icon>
<v-icon large color="teal darken-2">mdi-email</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="headline">Messages</v-list-item-title>
<v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-text>
<v-row align="center" justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM1</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">1111111111</p>
</v-col>
</v-row>
<v-row justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM2</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">111111111</p>
</v-col>
</v-row>
</v-card-text>
</v-card>
<v-card max-width="280">
<v-list-item>
<v-list-item-icon>
<v-icon large color="teal darken-2">mdi-email</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="headline">Messages</v-list-item-title>
<v-list-item-subtitle>overview of all messages</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-text>
<v-row align="center" justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM1</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">1111111111</p>
</v-col>
</v-row>
<v-row justify="center" no-gutters>
<v-col cols="5">
<p class="title">SYSTEM2</p>
</v-col>
<v-col cols="5">
<p class="subtitle-1">111111111</p>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-row>
<v-row no-gutters class="output" justify="center">
<v-col cols="7">
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
<v-banner two-line>
<v-avatar slot="icon" color="deep-purple accent-4" size="40">
<v-icon icon="mdi-lock" color="white">
mdi-lock
</v-icon>
</v-avatar>
Three line text string example with two actions. One to two lines is preferable. Three lines should be considered the maximum string length on desktop in order to keep messages short and actionable.
</v-banner>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
答案 1 :(得分：0)
您的body有一个overflow: hidden规则，而您的.output有一个height: 100vh和overflow-y: scroll规则。
只需删除这三个就可以了
这是因为您将身体的高度设置为100vh，因此视口中的所有可用空间。然后，对.output设置相同的规则，该规则在布局中较低，因此在溢出主体时隐藏。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？