html - Footerのウェブサイトは水平スクロールバーを作成しています

Question

これは私が現在取り組んでいるウェブサイトです：

http://whybaguio.com/php/about/about.php

フッターは余分な水平スクロールバーを作成しています。何が問題なのかよくわかりませんが、誰かが私を助けてくれますか？また、左側に余分な空白が作成されます。

ありがとう！

Answer 1

これは、100％width と 要素paddingの両方を指定したためです。古いIEバージョンblockについてあまり気にしない場合は、次を追加するだけでこれを修正できます。

#footer {
    width:100%;
    padding:30px;
    ...
    -webkit-box-sizing:border-box; /* Older webkit */
    -moz-box-sizing:border-box; /* Firefox */
    box-sizing:border-box;
}

また、フッターが画面の左、右、下に完全に届くように、ページのbodyaを0にすることもできます。margin

Answer 2

フッターの左側の空白は、bodyタグにあるデフォルトのマージン/パディングです。さらに、フッターの幅は100％+パディングであり、これを合わせると100％以上になります。100％ステートメントを削除すると、ブラウザは100％bijをデフォルトにし、パディングを補正します。

次の2つの変更をCSSに適用すると、すべてがうまくいきます。

body {
  padding: 0; // add this line
  margin: 0; // add this line
}

#footer {
 width: 100%; // remove this line
}

Answer 3

これは、＃footerで100％を使用し、左右に30pxのパディングを適用すると、100％の画面幅が追加されるためです。

以下のCSSを#footerから削除します。

padding: 30px;

Answer 4

設定padding-left: 0;しpadding-right:0;てフッターにdiv。私も疑問に思っています...なぜ醜いカスタムスクロールバーなのですか？

Answer 5

試す：

#footer{

...
padding: 30px 0;
...

}