スクロールバーの有無でコンテンツの位置ずれ

画面右端に表示されるスクロールバーが有る場合、無しの場合でページのコンテンツがわずかにズレるのが少々気になっていた。

CSSでは、以下のようにページの高さが100％を超える場合にのみスクロールバーを出すようにしていた。

html {
	/*overflow: scroll;*/
	height: 100%;
}

この措置は、すべてのページが100％で収まるとは限らないと思って施したものだった。

自サイト内のページのうち9.5割以上がheight100%のコンテンツなので、100%に満たないページを表示するとき、かえって気になるのでページすべてにスクロールバーを表示させたほうが良いのではという判断でCSSを少しいじった。

bodyセレクタに以下を追記。

body {
  /* スクロールだしっぱ設定*/
  overflow-y: scroll;
}