メインコンテンツに比べてサイドメニューが短い場合、スクロールし続けるとサイドメニューの下が空白になってなんとなく落ち着かない。かといってむりやり要素を追加したくはない。JavaScriptを使って固定する方法もあるけれど、めんどくさい。 と思っていたら、CSSだけで固定できるようになっていた。「position: sticky;」と固定する場所を指定するだけなのでとても簡単。 と思ったけれど、すんなり動かない。調べると親要素に「overflow」を指定しているとダメらしい。でも使っていない。 あーだこーだいじくりまわしけれど、固定させたい要素に「height: 100%;」を指定するとすんなり固定できた。 以下当サイトを元にした簡素なコード。 HTML CSS Safariのデベロッパーツールで確認すると、「.side」が「.main」より短くても高さを指定しないと「.main」と同じ高さ
![CSSだけでサイドメニューの固定 - 「position: sticky;」が効かない場合](https://cdn-ak-scissors.b.st-hatena.com/image/square/be25c79307a1c562e49ded4047be1b4b44194971/height=288;version=1;width=512/https%3A%2F%2Fblog.heartfield-web.com%2Fmedia%2Fposition-sticky-sidebar.png)