【CSS】position:sticky で整いました : 一萬人の麓路()

PC版ページですが

こんなふうに、メインカラムとサイドバーの高さが揃わなくて、私はずっと悲しかった。

このブログで言えば、メインカラムdiv#mainとサイドバーdiv#sidebarの高い方が、親要素div#contentの高さになります。
つまり
　　サイドバーの下が空いてしまう
　＝親要素がサイドバーより高い
　＝メインカラムがサイドバーより高い
という状態。

でも、ある CSSをたった一行追加すると──

文字通り足並みがぴったり！私は嬉しかった。

追加のCSS

#sidebar{
  -webkit-position: sticky;  /* for Safari */
  position: sticky;
  top: 0;
}

すみません、一行じゃなくて三行でした(笑)
stickyは「粘着する」という意味の形容詞。
これをpositionプロパティに指定したHTML要素は、親要素にうまい具合にひっついてくれる、というわけです。
メインカラムが大きくなり、隙間ができると、sticky要素(サイドバー)はその隙間を埋めるように自動的に位置を変えてくれます。
topには、サイドバーがウィンドウに固着する時の位置を指定します(必須)。このブログでは-20pxにして、少し上にずらしています。

メインカラムの方が小さい時は親要素の高さ＝サイドバーの高さなので、別に何も起こりません。
あと、親要素の高さがウィンドウサイズに収まって縦スクロールが発生しない時、またサイドバーかメインカラムがウィンドウサイズより低い時も、何も起こりません。

サンプルデモ

下の青枠内のラジオボタンでサンプルのプロパティが切り替わります。
スクロールの違いを確認してみてください。

position: relative(初期値) position: sticky

一人の麓路()

SIDE

こちらサイドバーです1

こちらサイドバーです2

リンク

一萬人の麓路()

Humozon

こちらサイドバーです3

MAIN

メインコンテンツです

咲-Saki-って面白いよね

いっしょに楽しもうよ！

健夜はいつも楽しそうにしてた

楽しそうに…してた…

小鍛治プロに逮捕状「可愛い罪」

つくば警察署は、石岡市高浜在住の麻雀プロ・小鍛治健夜容疑者(27)の逮捕状を取り、一両日中に逮捕する方針を固めた。
「アラサーなのにあの可愛さはおかしい」という近隣住民の通報が相次いでいた。
関係筋によると、現在、小鍛治容疑者は東京のテレビ局アナウンサー・F氏のマンションに潜伏しており、夕食の玉子かけ納豆丼を食べたあと熟睡しているという。
マンション周辺にはすでに私服捜査官が到着。
「可愛い罪」による逮捕者は国内初となる。