Question

我对vuetify模板的基本示例非常困惑。我在这里准备了代码笔：https://codepen.io/Disorrder/pen/aPpeBW 本示例按预期方式工作。我有带有工具栏的页面，并用内容填充了除工具栏以外的所有空间。而且效果很好，不会溢出。此代码也在官方文档中进行了描述：https://vuetifyjs.com/en/getting-started/quick-start#cdn-install

但是！我下面有这个完全相同的html代码。您可以只创建html文件并在浏览器中运行，然后查看问题。页面在工具栏高度上溢出，因此似乎v容器在100vh而不是父级高度的100％处划痕。我不明白这一点，放弃了。：（

屏幕截图：https://yadi.sk/i/cGIfK2iH_Clxyg

<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>

Answer 1

哦...我想，我找到了解决方案。如果在代码的开头添加<!DOCTYPE html>，则效果很好。但是到底是什么？有人可以解释这个魔术吗？

Vuetify基本模板溢出并带有<v-container fill-height =“”>

1 个答案: