我有一个运行Vuetify的Vue应用程序，但这些设备似乎都无法满足我将页面的最大长度限制为不滚动的要求。我希望这是有道理的。我的希望是将一个带有一系列路由的屏幕拉到类似格式的屏幕上。当然，用户可以缩小窗口，在这种情况下，我需要滚动。因此，当我想以最大页面长度将页面打开到全屏状态时，该设置如何设置，以防止需要NEED进行滚动，但是如果由于用户将页面大小调整为某些大小而仍需要时仍可以滚动好一点？
我花了数小时来寻找有关此问题的详细信息，但没有发现任何真正看起来直接的解决方案。如何设置最大页面长度？ CSS会提供这个吗？我看到了一种将CSS放在<head>标签中的解决方案，但是在Vue应用程序中，该head标签的使用方式与典型的HTML页面不同。
编辑：因为我不知道因为我在进行vue / vuetify工作，所以解决方案可能与一般情况不同，所以我认为最好提供App.vue和示例页面。
-App.vue ---
<template>
<v-app>
<app-toolbar></app-toolbar>
<router-view></router-view>
<app-footer></app-footer>
</v-app>
</template>
<script>
import AppToolbar from "./components/AppToolbar.vue";
import AppFooter from "./components/AppFooter.vue";
export default {
name: "App",
components: {
AppToolbar,
AppFooter
},
data: () => ({
//
})
};
</script>
<style scoped></style>
-Homepage.vue ---
<template>
<div>
<v-app>
<v-responsive aspect-ratio="16/9">
<v-carousel cycle hide-delimiter-background show-arrows-on-hover>
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
reverse-transition="fade-transition"
transition="fade-transition"
></v-carousel-item>
</v-carousel>
</v-responsive>
</v-app>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
}
]
};
}
};
</script>
<style></style>
编辑2：添加应用工具栏和应用页脚
--- Toolbar.vue ---
<template>
<div>
<v-toolbar dense color="#3F51B5" dark>
<v-app-bar-nav-icon
color="#76ff03"
@click.stop="drawer = !drawer"
></v-app-bar-nav-icon>
<v-btn to="/" color="#76ff03" text>Vuetification</v-btn>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-row align="center" justify="center">
<v-badge bordered color="error" icon="mdi-lock" overlap>
<v-btn class="white--text" color="error" depressed>
Lock Account
</v-btn>
</v-badge>
<div class="mx-3"></div>
<v-badge
bordered
bottom
color="deep-purple accent-4"
dot
offset-x="10"
offset-y="10"
>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
</v-avatar>
</v-badge>
<div class="mx-3"></div>
<v-badge avatar bordered overlap>
<template v-slot:badge>
<v-avatar>
<v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
</v-avatar>
</template>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
</v-avatar>
</v-badge>
</v-row>
<div class="hidden-sm-and-down">
<v-btn icon>
<v-icon color="#76ff03">mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-dots-vertical</v-icon>
</v-btn>
<v-btn color="#76ff03" text>About</v-btn>
<v-btn to="/contact" color="#76ff03" text>Contact</v-btn>
<v-btn to="/login" color="#76ff03" text>Login</v-btn>
</div>
</v-toolbar>
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
temporary
right
height="160px"
>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in items" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawer: false,
items: [
{ title: "Home", icon: "mdi-ghost" },
{ title: "About", icon: "mdi-kabaddi" }
]
};
}
};
</script>
<style scoped>
.toolbar-item {
color: #76ff03;
}
</style>
--- Footer.vue ---
plate>
<v-app>
<v-footer dark padless fixed>
<v-card class="flex" text tile>
<v-card-title class="teal">
<strong class="subheading"
>Get connected with us on social networks!</strong
>
<v-spacer></v-spacer>
<v-btn v-for="icon in icons" :key="icon" class="mx-4" dark icon>
<v-icon color="#76ff03" size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-title>
<v-card-text class="text-center">
<v-layout>
<v-flex class="toolbar-item" v-for="(col, i) in rows" :key="i" xs3>
<span class="body-2" v-text="col.title.toUpperCase()" />
<div v-for="(child, i) in col.children" :key="i" v-text="child" />
</v-flex>
<v-flex class="toolbar-item" xd3 layout column>
<span class="body-2">CONTACT</span>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-home</v-icon
>
New York, NY 10012, US
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-envelope</v-icon
>
info@example.com
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-phone</v-icon
>
+ 01 234 567 89
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-print</v-icon
>
+ 98 765 432 10
</div>
</v-flex>
</v-layout>
<strong> {{ new Date().getFullYear() }} — Vuetify </strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
icons: [
"fab fa-facebook",
"fab fa-twitter",
"fab fa-google-plus",
"fab fa-linkedin",
"fab fa-instagram"
],
rows: [
{
title: "Company Name",
children: [
"Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit"
]
},
{
title: "Produts",
children: [
"MDBootstrap",
"MDWordPress",
"BrandFlow",
"BootstrapAngular"
]
},
{
title: "Useful Links",
children: [
"Your account",
"Become an Affiliate",
"Shipping Rates",
"Helper"
]
}
]
})
};
</script>
<style scoped>
strong {
color: #76ff03;
}
.toolbar-item {
color: #76ff03;
}
</style
>
答案 0 :(得分：0)
您可以将内容嵌套在另一个div元素中。如果内部div的max-height等于其容器的高度，则滚动条将永远不会出现。如果您想查看滚动条，请使用它。
.scrollDiv {
height:auto;
max-height:150%;
overflow:auto;
}