Bootstrap-vueにてフッターを固定する方法

Question

Vue.jsにて、フッターを作成しようとしています。
Bootstrap-vueを使用して、全体のデザインの統一を測っておりまして、footerを最下部に固定する方法をBootstrap-vueを用いて記述する方法があれば知りたいと思っています。
よろしくお願いいたします。

Answer 1

Vue.jsは関係ない設定になりますが、メインコンテンツ部をid="content"、フッター部をid="footer"とすると、以下のCSSでどうでしょうか。

  <div id="app">
    <div id="header">
    </div>
    <div id="content">
    </div>
  </div>

  <footer id="footer">
  </footer>

#app {
  margin: 0;
  min-height: 100vh;
}

#content {
  padding-bottom: 60px; /* footerのheight+余白 */
}

#footer {
  padding: 5px 10px; 
  height: 30px;
  margin-top: -30px;
}

Comments

[programquestion]

ありがとうございます。100vhが活用できそうでした。