css - この二重スクロールバー/空白の原因は何ですか?

Question

Chrome、Firefox、そして明らかに IE で奇妙な問題が発生しました。私は自分のポートフォリオ サイト/ブログ用に WordPress テーマを構築していますが、すべて問題ありませんでしたが、今日まで Chrome でサイトを表示すると、突然、ページの下部に大きな白いバーが表示されました。 Firefox/IE では、サイドバーが 2 つ表示されます。ここにページがありますhttp://iamdannygreen.com/?p=5 Firefox の醜いヘッダーを許してください。まだすべてのブラウザのバグが修正されていません。どんな助けでも大歓迎です。ありがとうございました

Answer 1

ヘッダーを修正して本文から削除するoverflow-x: hiddenと、問題なく機能します。

ヘッダーを修正するということは、つまり、これは何ですか...？

margin-left:-1000px;
padding-left:1000px;
padding-right:1000px;
margin-right:1000px;

ヘッダーの背景をウィンドウの幅全体に広げたい場合は、ヘッダーをウィンドウの外側に移動し#wrapper、コンテンツの内側に別のラッパーを配置します（コンテンツが中央に表示されるようにします）。

<div id="header">
    <div class="wrap">content here</div>
</div>
<div class="wrap" id="content"> body stuff here </div>

.wrap {
  width: 500px;
  margin: 0 auto;
}
#header {
  background-color: #CCC;
}

#content {
  background-color:#FFF;
}

デモ。