ページの中央寄せの横方向の微妙なズレを解消する方法

CSSを用いてページを中央寄せレイアウトにしても、横方向に微妙なズレが生じる場合がある。

これは、スクロールバーが表示されているか、表示されていないかで画面の幅が変わってしまうためである。

この問題は、コンテンツが短い場合にでも、常にスクロールバーを表示させることで解消できる。

具体的な方法は、全てのページが参照するCSSファイルに対し、

html { overflow-y: scroll; }

を追加する。もしくは、htmlタグに直接

<html style=”overflow-y: scroll;”>

とする方法もある。

【関連記事】
CSSによる中央寄せのクロスブラウザ化

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/css/458/trackback/