Vuetify 工具栏和居中块使页面可滚动
Posted
技术标签:
【中文标题】Vuetify 工具栏和居中块使页面可滚动【英文标题】：Vuetify toolbar and centered block makes the page scrollable 【发布时间】：2019-08-05 03:38:53 【问题描述】：正如标题所说，我的页面实际上不应该滚动时是可滚动的。
我使用的是与居中卡片相结合的工具栏。 v-container 是 fill-height 并且里面的布局是居中的。 v-toolbar 有一个属性“app”，它根据工具栏的高度给出 v-content 的顶部填充。由于这种填充，整个页面在不应该滚动的时候是可滚动的。即使一切都合适，只有当屏幕高度小于卡片本身时，它才应该是可滚动的。另外，当屏幕高度较小时，需要属性'app'来防止卡片显示在工具栏下。
代码：
<div id="app">
<v-app id="inspire">
<v-toolbar dark fixed app>
<v-toolbar-title>Toolbar something</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
<v-flex text-xs-center>
<v-card>
<v-card-text>HUH <br /> <br /> <br /> Centered</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
结果：
注意：不知何故，我无法在 CodePen 中重现此问题，但是，我可以在空白的 Vue 项目中重现它。
【问题讨论】：
你试过删除fill-height吗？
是的，但是当不使用fill-height时，块不会居中。我也在使用最新版本的 Vue (2.6.9) 和 Vuetify (1.5.6)
这不是集中它们的正确方法。 fill-height 用于“确保 col 元素高度充满父子元素”。您可以使用<v-layout column wrap justify-center align-center> 集中删除fill-height
另一种集中卡的方式<v-layout> <v-flex xs12 sm6 offset-sm3> <v-card></v-card><v-flex><v-layout>
当我应用您的更改（两者）时，该块未垂直居中。
【参考方案1】：
解决方案：在渲染Vue时在基础页面上<!DOCTYPE html>
【讨论】：
以上是关于Vuetify 工具栏和居中块使页面可滚动的主要内容，如果未能解决你的问题，请参考以下文章
iOS 利用UICollectionView横向滚动余弦函数曲线特性实现居中放大的卡片浏览工具 XLCardSwitch