Vue.js Vuetify基本模板溢出，带有<；v形容器填充高度>；_Vue.js_Vuetify.js

Vue.js Vuetify基本模板溢出，带有<；v形容器填充高度>；

vue.js

Vue.js Vuetify基本模板溢出，带有<；v形容器填充高度>；,vue.js,vuetify.js,Vue.js,Vuetify.js,我对vuetify模板的基本示例感到非常困惑。我在这里准备了代码笔：此示例按预期工作。我有一个带有工具栏的页面，并用内容填充了除工具栏外的所有空间。而且它工作得很好，没有溢出。官方文件中也描述了该代码：但是！我在下面有完全相同的html代码。您只需创建html文件并在浏览器中运行，即可看到问题所在。页面在工具栏高度上溢出，所以v-container似乎在100vh上，而不是父级高度的100%。我无法理解这一点，于是放弃了( 截图：试验 window.onload=（）=>{ 新Vue(

我对vuetify模板的基本示例感到非常困惑。我在这里准备了代码笔：此示例按预期工作。我有一个带有工具栏的页面，并用内容填充了除工具栏外的所有空间。而且它工作得很好，没有溢出。官方文件中也描述了该代码：

但是！我在下面有完全相同的html代码。您只需创建html文件并在浏览器中运行，即可看到问题所在。页面在工具栏高度上溢出，所以v-container似乎在100vh上，而不是父级高度的100%。我无法理解这一点，于是放弃了(

截图：


试验
window.onload=（）=>{
新Vue({
el:“#应用程序”，
});
};
工具栏

哦……我想，我找到了解决办法。如果你在代码开头加上

，它会非常出色。但是这是什么鬼东西？有人能解释这个魔法吗

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>

    <title>Test</title>

    <script>
        window.onload = () => {
            new Vue({
                el: '#app',
            });
        };
    </script>
</head>

<body>
    <div id="app">
        <v-app>
            <v-toolbar app dense>
                <v-toolbar-title>Toolbar</v-toolbar-title>
            </v-toolbar>
            <v-content>
                <v-container fluid fill-height>
                    <v-layout style="background: #bed;"></v-layout>
                </v-container>
            </v-content>
        </v-app>
    </div>
</body>
</html>