Vuetify basic template overflows with <v-container fill-height>

Question

I'm very confused with basic example of vuetify template. I have prepared codepen here: https://codepen.io/Disorrder/pen/aPpeBW This example works as expected. I have page with toolbar and filled all space except toolbar with content. And it works nice without overflowing. Also this code was described here in official docs: https://vuetifyjs.com/en/getting-started/quick-start#cdn-install

But! I have this absolutely same html code below. You can just create html file and run in browser, and see the broblem. Page overflows on toolbar height, so it seems v-container stratches on 100vh instead of 100% of parent's height. I can't understand this and give up. :(

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

Disorder Disorder · Accepted Answer · 2018-12-22T00:53:27

oh... I think, I found solution. If you add <!DOCTYPE html> at the beginning of the code, it works as a brilliant. But what a hell? Can anybody explain this magic?

Vuetify basic template overflows with <v-container fill-height>

1 Answers