スクロールバーを常に表示するCSS

更新日：2015年8月3日

サイトを閲覧していると、ページによってコンテンツの位置がずれることってありませんか？
おかしいなぁー……何かのバグだろうかって思っていたら、よく見たらスクロールバーが表示されているか否かでずれが生じているようです。

つまり内容が少なく、縦に短いページにはスクロールバーが表示されていない関係で、そのスクロールバーの幅分ずれているのです。
となると、整合性を保つ為にスクロールバーを常に表示させておけばいいのです。

ではその解決方法ですが、CSSで

html {
	overflow-y: scroll;
	margin-bottom: 1px;
	height: 100%;
}

と記述すればOKです。

クライアントさんにずれが気になるといったことを指摘されることがあるので、私は新規でサイト制作をする際には、必ずこのCSSを記述するようにしています。