html　画面の下半分の色が勝手に変わる

html
1<body>
2<header>
3   　<h1>フルーツ</h1>
4</header>
5<article>
6    <p>りんご</p>
7    <p>みかん</p>
8    <p>めろん</p>
9</article>
10<footer>
11    <v-btn>食べる</v-btn>
12    <v-btn>料理</v-btn>
13</footer>
14</body>
15```
16何も指定していないのに、画面の下半分が薄いグレーになっています。上半分はbodyに指定した白になっています。
17btnがグレーの部分にあるのですが、デベロッパーツールで確かめると白の部分だけがbodyになっています。
18htmlでbtnはbodyにはいっているのですが、これはどういったことなのでしょうか、よろしくお願いします。
19
20
21
22
23
24
25
26```html
27<template>
28<body>
29    <header>
30        <v-container>
31            <v-row no-gutters>
32                <v-col align-self="center">
33                    <h1>フルーツ</h1>
34                </v-col>
35                <v-spacer></v-spacer>
36                <v-col align-self="center">
37                    <div class="todaytime">
38                        <span id="view_today">{{ today_label }}</span>
39                        <span id="view_clock">{{ clock_label }}</span>
40                    </div>
41                </v-col>
42            </v-row>
43        </v-container>
44    </header>
45<article>
46        <p>りんご</p>
47        <p>みかん</p>
48        <p>めろん</p>
49</article>
50    <footer>
51        <v-btn>食べる</v-btn>
52        <v-btn>料理</v-btn>
53    </footer>
54</body>
55</template>
56```
57
58```ここに言語を入力
59        methods: {
60            getToday: function() {
61                var now = new Date();
62                var year = now.getFullYear();
63                var mon = now.getMonth()+1; //１を足すこと
64                var day = now.getDate();
65                var you = now.getDay(); //曜日(0～6=日～土)
66
67                //曜日の選択肢
68                var youbi = new Array("日","月","火","水","木","金","土");
69                //出力用
70                var s = year + "年" + mon + "月" + day + "日 (" + youbi[you] + ")";
71                return s;
72            },
73            clock: function() {
74                this.clock_label = this.getNow();
75            },
76            getNow: function() {
77                var now = new Date();
78                var hour = now.getHours();
79                var min = now.getMinutes();
80                if (hour < 10 ){ hour = "0" + hour;}
81                if( min < 10 ) { min = "0" + min; }
82                //出力用
83                var s =  hour + ":" + min ; 
84                return s;
85            },
86```

maisumakun

2019/12/27 01:39 編集

Vue.jsをマウントする部分などを含め、<html>全体を書いていただけないでしょうか。

meronpansuki

2019/12/27 02:03

よろしくお願いします。

maisumakun

2019/12/27 02:06

えっと、この<template>をセットするコードはどのようなものでしょうか。

meronpansuki

2019/12/27 02:12

これで大丈夫でしょうか・・・

maisumakun

2019/12/27 02:15

<head>はどのようになっていますか？

meronpansuki

2019/12/27 02:22 編集

どのようにというのは、cssがということですか？ mounted() { console.log('Component mounted.aaa'); this.today_label = this.getToday(); let timerID = setInterval(() => { this.clock() }, 500); //0.5秒毎にclock()を実行こういったことですか？読解力がなくすみません。。

maisumakun

2019/12/27 02:23

HTMLには<head>と<body>があるかと思うのですが、<head>はどう書いていますか？

maisumakun

2019/12/27 02:28

（もしかして、<!DOCTYPE>から</html>まで書かないような、単なるHTMLファイルと異なる環境で動かしているのでしょうか）

meronpansuki

2019/12/27 02:42

そうです。一つのシートにcssもjavascriptも書いております。

maisumakun

2019/12/27 02:46 編集

どのような環境で動かしていますか？（「シート」が何を意味するのかわかりません）