我有以下基于 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/ 。 不要忘记按运行!!
我想避免整个页面滚动,而只提供内部滚动
<v-row no-gutters class="output" justify="center">
阻止。
最佳答案
这里我有一个解决方案..
您只需从 .output
的 100vh 高度中减去所有其他元素的高度
这里我们假设您的其他元素高度为 275px
,因此您只需从 100vh(.output)
减去 275px
,如下所示
.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>
关于html - 看不到最后的滚动 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57620785/