bootstrap4のnavbarの固定 #bootstrap4

cssのpositionプロパティにstickyを指定する
Navbar - Bootstrap

headerを追加する

...(略)...
<body>
<header>
<nav>
...(略)...
</nav>
</header>
<main>
...(略)...
</main>
</body>
...(略)...

headerのスクロール抑止

...(略)...
<body>
<header class="sticky-top">
<nav>
...(略)...
</nav>
</header>
<main>
...(略)...
</main>
</body>
...(略)...

footerの追加

footert用のスタイルシートを用意する。
画面上部にNavbarがある場合とない場合でスタイルが異なる。
Bootstrap4 SampleのSticky footerとSticky footer navbar

当環境では4.3のSticky footer navbarではうまくいかなかったので3.4のサンプルを使用する。
Sticky footer navbar

CSSの変更

sticky-footer-navbar.css

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
}


/* Custom page CSS
 * Not required for template or sticky footer method.
 * -------------------------------------------------- */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

...(略)...
<body>
<header class="sticky-top">
<nav>
...(略)...
</nav>
</header>
<main>
...(略)...
</main>
<footer class="footer">
<div class="container">
...(略)...
</div>
</footer>
</body>
...(略)...

.footerのpositionプロパティがabsoluteであれば常に下部に張り付くがスクロール次第で見えなくなる。
positionプロパティをfixedにするとスクロールしても常に下部に表示する