css - CSS - 余分な水平スクロールがどこから来ているのかわかりませんか?

Question

メディアクエリを使用するレスポンシブ Web サイトを変更しようとしています。

Web サイトをモバイルサイズにスケーリングすると、画面のサイズに関係なく、水平スクロールが必要になります。

これを引き起こしていると思われるものをすべて変更しようとしましたが、その原因を突き止めることはできません。

Web サイトとメディアクエリの css ファイルへのリンクは次のとおりです。

score 0 · Accepted Answer

% width/heights の上にパディングが追加されます。したがって、パディングで幅が 100% の場合、100% を超えます。

box-sizing: border-boxボックスのモデルを変更するのが手っ取り早い方法ですが、別の方法をお勧めします。

編集：投稿が遅れているようです...

score 0 · Accepted Answer

これをcssに追加します

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

また

.Your_Container{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

score 0 · Accepted Answer

#sidebar と #container の width:100% にパディングを追加しているため、幅の合計は常に 100% を超えます。全体の幅が 100% になるように、パディングにもパーセント値を使用してみてください。このようなもの：

#sidebar{width:90%; padding:25px 5% 10px}
#container{width:90%; padding:5%;}

3 に答える 3