浜村拓夫(・∀・)作品集

頭の中にあるイメージを表現できるデザイン力が欲しいです(><)

Webページでスクロールバーのずれを解消する方法

Webサイトを作っていると、縦が長いページと短いページで、スクロールバーの分だけ横幅が違っている場合がありますね。

この横幅の違いによって、ページ上の配置物がずれて見える場合がありますが、スクロールバーを常に表示させる設定にすることで解消できます。

→ときどきしか、この設定をしないので備忘録としてメモ。

 

●スクロールバーを常に表示する方法

(参考)【CSS】 スクロールバーを常に表示する | approad

css3に対応していれば下記を設定すればいいようです。

html {
  overflow-y:scroll;
}


css3に対応していなければこんな感じ。

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

 

overflow-y−スタイルシートリファレンス

overflow-yプロパティは、Internet Explorerが独自に追加したプロパティで、 ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。

 

developer.mozilla.org

scroll
コンテンツはクリップされ、デスクトップブラウザではコンテンツがクリップされたかどうかに関わらず、スクロールバーを描画します。これは、動的な環境でスクロールバーが表示されたり消されたりして起きる問題を防ぎます。プリンターははみ出たコンテンツを印刷するかもしれません。

 

overflowは、「えーと、あれ何だったっけ?」と忘れがちなプロパティーですね!

メモメモ。