【CSS】サイドバーをStickyで下部で固定して追従させる

メニューや要素をスクロール可能なコンテナ内で特定の位置に固定・追従するのに便利なpositionプロパティ「Sticky」。
サイドバーなどの要素を、下部で固定して追従させる方法。

<div class="container">
  <div class="content">
    <!-- メインコンテンツ -->
  </div>
  <div class="sidebar">
    <!-- サイドエリア -->
  </div>
</div>

.container {
  display: flex;
  align-items: flex-end;
}
.content{
  width: 70%;
}
.sidebar {
  width: 30%;
  position: sticky;
  bottom: 20px;
}

3行目の「align-items: flex-end;」がポイント。

「Sticky」が効かない、固定できない場合は下記ご確認ください。

■position:stickyが効かない時に確認する項目

①親・祖先要素に「overflow: hidden」を指定している（※一番多い）
②高さに差がない
③ポジション指定（top、botom、right、left）がない
④その他（ブラウザが対応、JavaScriptの影響）