2

フッターの幅を 100% に設定しましたが、スクロール バーの幅が 100% を超えています。理由はありますか？100％を削除するとスクロールバーが表示されないため、幅に問題があることはわかっています。ページは body>wrapper>footer に分割されています ここに私のコードがあります:

 #footer {
  margin-top: 30px;
  color: white !important;
  padding-bottom: 15px;
  background: black;
  text-align: center;
  padding: 20px;
  height: 40px;
  min-width: 1000px;
  width:100%;
  position:absolute;
  bottom:0;
}

そして本体のCSSがあります：

body {
  font: normal 12pt Georgia, serif;
  color: #111;
  background: #990000;
  margin: 0 auto;
  text-align: center;
  background-position: 50% 50%;
  min-height: 100%;

  margin:0;
    padding:0;
    height:100%;
}

そしてラッパーcss：

#wrapper {
    min-height:100%;
    position:relative;
}
4

5 に答える 5

4

フッターの css にパディングが設定されています。これは幅に加算され、100% よりも大きくなります。そのため、スクロールバーが表示されています。

パディングを次の行に置き換えます。

padding-top:20px;
padding-bottom:20px;

また、フッター div の最小幅を 1000px に設定すると、1000px よりも狭いブラウザー画面でスクロールバーが表示されます。

于 2012-10-01T05:24:37.067 に答える
1

ほとんどの場合、これはデフォルトのBox モデルが HTML ページでどのように機能するかによるものです。コンテンツの幅が 100% に設定された後、境界線、マージン、およびパディングが追加され、最終的な幅が 100% を超えて増加します。

最新のブラウザーの場合: ボックスのサイズ変更を歓迎します!

  1. 元のコードでこのjsfiddleを参照してください。
  2. ボックスのサイズを に設定して、この新しいバージョンを参照してください(新しいブラウザでのみ動作します)。このバージョンでは、水平スクロールバーが表示されません (最小幅をかなり小さくしました。そうしないと、jsfiddle の例から外れてしまいます)。border-box

古いブラウザの場合

古いブラウザーでこれを修正したい場合は、CSS のパディングについて何かをする必要があります。フッターから削除し、古いパディングと同じ余白で「フッターコンテンツ」div を内部に配置します。例えば：

#footer { 
    /* padding: 20px; removed! */
}
#footer-content { 
    margin: 20px;
}
于 2012-10-01T05:24:14.387 に答える
1

多くのブラウザーでは、BODY 要素の周囲に既定の余白があり、これが幅に追加されます。

于 2012-10-01T05:25:30.657 に答える
0

開始時にすべての要素に 0 のパディング、0 の境界線、および 0 のマージンを追加するだけです。

* {
padding: 0;
border: 0;
margin: 0;
}
于 2016-06-14T18:07:20.940 に答える
0

これは、パディングが原因で発生しています。ここで問題の図を参照してください。

パディングを使用すると、サイズが合計の高さと幅にそれぞれ追加されます。

パディングを削除すると、問題が解決します。デモ

 #footer {
  margin-top: 30px;
  color: white !important;
  background: black;
  text-align: center;
  height: 40px;
  min-width: 1000px;
  width:100%;
  position:absolute;
  bottom:0;
}

別の良い解決策は、ブラウザーが要素を別の方法で処理するようにすることです。box-sizingプロパティを使用して。

 #footer {
  /* Add box-sizing */
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  margin-top: 30px;
  color: white !important;
  padding-bottom: 15px;
  background: black;
  text-align: center;
  padding: 20px;
  height: 40px;
  min-width: 1000px;
  width:100%;
  position:absolute;
  bottom:0;
}

デモ

于 2012-10-01T05:29:28.890 に答える