-
ID:1OVRBU さんの質問

横幅を指定したページで、縦スクロールが発生すると微妙な隙間が出ます。
横幅を960pxで作ったページで、全コンテンツが少ない時(縦スクロールが出ない時)は問題なく表示されているのですが、コンテンツが多く縦のスクロールが発生した場合、右に15pxほどのわずかな隙間が発生し、横スクロールが出てきます。(縦スクロールの幅っぽい?)
この横スクロールが発生するのは、横幅が960〜975の場合のみで、976を超えると横スクロールは出てきません。

中身のコンテンツはフロートしたり絶対配置したりしているものはなく、コンテンツを全て960pxに収まるサイズにしましたが、出てきました。
原因がわかる方いらっしゃいますか?

これ自体はoverflow-x: hidden;で消えたのですが、ちょっと気になったもので…。
ちなみにこの現象が出ていたのはChromeとFirefoxです。(ともに最新ver)

みんなの回答 2 件

ID:Ijd.NH さんの回答

横幅960pxの画像とか含んでるのでは

ID:1OVRBU

画像も含め、サイズは960に収まるようにしてるので、それはないかと…。

ID:sQBiSB さんの回答

縦のスクロールバーの分だけ横幅が縮むからだと思います。

ID:1OVRBU

すみません、ちょっとよくわからないです。
縦スクロールの幅ということですか?

ID:iDl2VB

最新Mac系はブラウザのスクロールバーが上に乗っかるから気にしなくていいけど、古いOSやブラウザはスクロールバーは右端にくっつく形になるから、その分、サイトの表示幅が減りますね。

ID:Ey/Tos

右端にスクロールバーが出ていると思うのですが、
ブラウザ側でそのスクロールバーの幅の分、ウィンドウ内の幅が狭く計算されるなるので、それによって発生しているのではと思います。
つまり、スクロールバーが15pxだとすると、960pxのウィンドウ幅を指定するとコンテンツエリアは945pxになってしまうという感じです。

以下のあたりが参考になるかと。
web-codery.com/html/59
css-happylife.com/archives/2007/0209_0045.php

ID:1OVRBU

確認した環境はOSがMac10.9.3、ブラウザは最新バージョンのChrome、Firefox、Safari、IEです。
SafariとIEは問題なかったです。

ID:1OVRBU

Ey/TosggODhuさん
参考になりそうな記事ですね。ありがとうございます。
記事はFirefoxだけみたいですが、Chromeも同じ現象なんでしょうかね、きっと。
Chromeはあまりこういうことがないのでちょっと意外ですが。

最終更新日:2014-08-05 (7,390 views)

関連するトピックス

ページ上部に戻る