サイドバーにスクロール追尾型の広告を配置する時は、CSSのposition:stickyが便利です。
これを使うと、Javascriptなしでスクロール追尾型コンテンツを配置できます。
そんな便利なstickyですが、場合によってはうまく効かない場合があるんです。
実際、僕も当サイトをカスタマイズしているときにハマりました。
そこで、この記事ではposition:stickyが効かない場合の対応策をシェアします。
ポイントは、フレックスボックス（display:flex）です。
position:stickyの基本形
まずは、スクロール追尾型コンテンツを配置するときの基本形から。
この場合、#adをスクロール追尾させるには、次のCSSを書きます。
position: -webkit-sticky; /* Safari */
position: sticky;
}
適切に表示されない原因
でも、基本形だけでは適切に表示されない場合があります。
スクロールしてもちゃんと追尾しないんです。
いろいろと調べてみると、#mainと#sideの高さが揃っていない場合にうまく行かないことが分かりました。
つまり、こういうケースです。
高さが揃わない原因は色々と考えられますが、最も多いのは、floatで#mainと#sideを横並びにしているケースです。
この場合は#sideのheightを100%にしても、#mainのheightと同じにはなりません。
floatを使うと、高さが失われてしまうようです。
floatを使いつつ高さも維持する方法を調べたみたんですが、CSSだけで実現させる方法は結局分かりませんでした。
解決策
じゃあ、どうするか。
解決策は、フレックスボックス（diplay:flex）を使うことです。
フレックスボックスを使うことで、横並びさせつつ、高さも揃えることができます。
具体的には、横並びさせたい要素の親要素、今回で言えば#contentにdiplay:flexを指定します。
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
古いブラウザにも対応させるために色々書いてます。
最新のブラウザのことだけを考えるなら、diplay:flex;だけでもOKです。
最後に
diplay:flexはCSS3で追加された仕様なので、IE8には対応していません。
個人的にはIE8対応はもう切り捨てているので全然構わないんですが、そうも言えない状況もあるかもしれないので、一応注意してくださいね。