Q&A
サンプルのページが見れません。URLは正しいですか?
お世話になっております。
HTMLでどうしても分からないことがありましたので質問させて下さい。
lang
1<body> 2 <div id="container"> 3 コンテンツ 4 </div> 5</body>
上記の構成でページを制作しておりました。
コンテンツの部分には、h2のタイトルとTableで構成された表になります。
こちらのコンテンツを増やしていくうちに、「ある一定の部分でBodyが急にずれる」という現象がおこりました。
１．この現象はなぜ起こるのでしょうか？
２．この現象を解決する方法はありますでしょうか？
宜しくお願い致します。
尚、どういった現象かは下記のページにアクセスしていただき、「コンテンツ追加」ボタンを押すとコンテンツが追加され、２回ボタンを押した段階でBodyがずれます。
参考：現象が起こった環境
OS:Windows7
ブラウザ：Chrome、IE
1920pxディスプレイフル画面（最大化状態）
（こちらの環境ですと、ウィンドウ幅を変更しても起こります。）
早速のご回答ありがとうございます。こちらでは正常に表示されます。
すみません、ドメインを発行したばかりなのでもしかしたら浸透しきっていないかもしれません。
しばらく経ってからお試し頂いてもよろしいでしょうか。
ご迷惑をお掛けして申し訳ございません。
アクセス出来ないとの回答を複数頂きましたので、お手数ですがこちらの別URLをお試し下さい。
http://ruchi.main.jp/test/test.html
回答3件
0
ベストアンサー
ひとまず原因は分かりました。
スクロールバーの有無になります。
対策はのちほど・・・
追記
対策ではないですが、正しい原因としてはスクロールバーとdiv#containerのmargin:0 autoになります。
スクロールバーの有無でmarginが変化するためです。
対策追記
以下のcssを適用することでずれなくすることができます。
lang
1html { 2 overflow-y:scroll; 3}
このcssを適用することで常にスクロールバーが表示されるので、ずれません。
投稿2015/06/08 06:12
編集2015/06/08 06:43総合スコア1698
ご教授下さいまして、ありがとうございます！
なるほど、スクロールバーですね。
Google chromeではスクロールする必要がないページでも常に右にスクロールバーが表示されておりますので、完全に盲点でした。
上記で解決いたしました。ありがとうございます。
失礼いたしました、常に表示されているのは誤解でした(；´Д｀)
表示されておらず、表示するタイミングになってから表示されるが故ずれるんですよね(^_^;)
0
スクロールバーの出現とは関係ありますでしょうか。
投稿2015/06/08 06:12
総合スコア1111
ご回答ありがとうございます。
まさに、スクロールバーが原因でした。
Chromeではスクロールバーが常に表示されておりますので、完全に盲点でした。
ヒントを下さいまして、ありがとうございました。
失礼いたしました、常に表示されているのは誤解でした(；´Д｀)
表示されておらず、表示するタイミングになってから表示されるが故ずれるんですよね(^_^;)
0
http://test.pudding-system.com/test.html
ここにアクセス出来ないのですが。。。。
投稿2015/06/08 05:56
総合スコア1869
ご迷惑をお掛けして申し訳ございません。
アクセス出来ないとの回答を複数頂きましたので、お手数ですがこちらの別URLをお試し下さい。
http://ruchi.main.jp/test/test.html
ありがとうございます！
僕のmac,chromeだとbodyがずれるという現象が起きないのですが
そもそも「bodyがずれる」とはどういう現象でしょうか？？
私の環境(windows7, chrome) で再現しました。
全体が左にずれますね。
今から少し調べます。
あなたの回答
tips
プレビュー
