やりたいこと

タブとフッターを画面上部と下部に固定して、
タブ内のコンテンツが重ならないようにしたい。

試したこと

cssによるフッター固定
→下記のcssを作成しましたがタブ内のコンテンツが重なってしまい不適
（コンテンツが重なるのは避けたい）

.footer {
height:60px;
margin-top:-100px;
position: fixed;
bottom: 0;
width: 100%;
}

こちらが実際のHTMLです。<br>を続けたような場合に画面下部ではなくページの下部にフッターが表示されてしまいます…
どのようにすれば改善されるのでしょうか？

<body>
    <div id="app" class="main">
      <v-app>
        <v-tabs grow background-color="deep-purple accent-4" center-active>
          <v-tab v-for="(tab,index) in tabArray" @click="changeTab(index)"
            >{{tab}}</v-tab
          >
          <!-- tab0 -->
          <v-tab-item>
            tab{{currentTab}}
          </v-tab-item>
          <!-- tab1 -->
          <v-tab-item>
            tab{{currentTab}}
          </v-tab-item>
          <!-- tab2 -->
          <v-tab-item>
            tab{{currentTab}}
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
          </v-tab-item>
        </v-tabs>
      </v-app>
      <footer>
          <v-row>
            <v-col><v-btn>left</v-btn></v-col>
            <v-col><v-btn>right</v-btn></v-col>
          </v-row>
        </footer>
    </div>
  </body>

ご助言いただけますと幸いです。

mouse_484

2019/11/28 01:58 編集

不適切なcssとはなんですか？追記してください

sszkks

2019/11/28 14:24

追記させていただきました。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

cssを読ましてもらいました、少し古い書き方を使っているようです。

flexという最近の書き方を使いことで完結に、思っている事を実装できます

html
1<body>
2  <div class="main">
3    <footer></footer>
4  </div>
5</body>

css
1.main {
2  display: flex;
3  flex-direction: column;
4  min-height: 100vh;
5}
6footer {
7  margin-top: auto;
8}

投稿2019/11/29 00:08

編集2019/11/29 00:09

mouse_484

総合スコア759

sszkks

2019/11/30 10:48

ご助言いただきありがとうございます。 flexというものを知らなかったため勉強になりました。今回VuetifyというUIフレームワークを使用しており、いただいたcssをうまく用いることができず… 補足情報としてHTMLを追記させていただいたのですが、もしよければ改修方法の方針を教えていただけますと幸いです。