teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

補足情報の追加

2019/11/30 10:45

投稿

sszkks
sszkks

スコア15

title CHANGED
File without changes
body CHANGED
@@ -20,4 +20,77 @@
20
20
  }
21
21
  ```
22
22
 
23
+ こちらが実際のHTMLです。<br>を続けたような場合に画面下部ではなくページの下部にフッターが表示されてしまいます…
24
+ どのようにすれば改善されるのでしょうか?
25
+ ```
26
+ <body>
27
+ <div id="app" class="main">
28
+ <v-app>
29
+ <v-tabs grow background-color="deep-purple accent-4" center-active>
30
+ <v-tab v-for="(tab,index) in tabArray" @click="changeTab(index)"
31
+ >{{tab}}</v-tab
32
+ >
33
+ <!-- tab0 -->
34
+ <v-tab-item>
35
+ tab{{currentTab}}
36
+ </v-tab-item>
37
+ <!-- tab1 -->
38
+ <v-tab-item>
39
+ tab{{currentTab}}
40
+ </v-tab-item>
41
+ <!-- tab2 -->
42
+ <v-tab-item>
43
+ tab{{currentTab}}
44
+ <br>
45
+ <br>
46
+ <br>
47
+ <br>
48
+ <br>
49
+ <br>
50
+ <br>
51
+ <br>
52
+ <br>
53
+ <br>
54
+ <br>
55
+ <br>
56
+ <br>
57
+ <br>
58
+ <br>
59
+ <br>
60
+ <br>
61
+ <br>
62
+ <br>
63
+ <br>
64
+ <br>
65
+ <br>
66
+ <br>
67
+ <br>
68
+ <br>
69
+ <br>
70
+ <br>
71
+ <br>
72
+ <br>
73
+ <br>
74
+ <br>
75
+ <br>
76
+ <br>
77
+ <br>
78
+ <br>
79
+ <br>
80
+ <br>
81
+ <br>
82
+ <br>
83
+ <br>
84
+ </v-tab-item>
85
+ </v-tabs>
86
+ </v-app>
87
+ <footer>
88
+ <v-row>
89
+ <v-col><v-btn>left</v-btn></v-col>
90
+ <v-col><v-btn>right</v-btn></v-col>
91
+ </v-row>
92
+ </footer>
93
+ </div>
94
+ </body>
95
+ ```
23
96
  ご助言いただけますと幸いです。

1

補足情報の追加

2019/11/30 10:45

投稿

sszkks
sszkks

スコア15

title CHANGED
File without changes
body CHANGED
@@ -7,6 +7,17 @@
7
7
  # 試したこと
8
8
 
9
9
  cssによるフッター固定
10
- →タブ内のコンテンツが重なってしまい不適
10
+ 下記のcssを作成しましたがタブ内のコンテンツが重なってしまい不適
11
+ (コンテンツが重なるのは避けたい)
11
12
 
13
+ ```
14
+ .footer {
15
+ height:60px;
16
+ margin-top:-100px;
17
+ position: fixed;
18
+ bottom: 0;
19
+ width: 100%;
20
+ }
21
+ ```
22
+
12
23
  ご助言いただけますと幸いです。