0

私のヘッダーには、ブラウザーの幅が何であれ (2000px、4000px など) 拡大する繰り返し要素があります。ヘッダー要素内には、幅 1200px の固定された背景があります。私のページのレイアウトは幅 960px です。

固定を 1200px に設定すると、ブラウザの幅が 1200px 未満のユーザーには水平スクロールバーが表示されます。

1100px のブラウザー ウィンドウを使用しているユーザーに水平スクロール バーが表示されないようにするにはどうすればよいですか?

header {
  background: #000 url("/images/bg-header-repeat.png") repeat;
  position: relative;
}

.header-wrapper {
  background: url("/images/bg-header.png") no-repeat left top;
  margin: 0 auto;
  min-height: 100px;
  width: 1200px;
}

.container {
  margin: 0 auto;
  width: 960px;
}
4

2 に答える 2

1

コンテナに静的な（そして大きな）幅を与えないでください。

これを行う：

.header-wrapper {
  background: url("/images/bg-header.png") no-repeat left top;
  min-height: 100px;
  width:100%;
  position:relative;
  left:0;
  top:0;
}

.container
{
    position:relative;
    width:80%;
}

大きな静的幅を指定すると、水平スクロールバーがある程度の解像度で表示される傾向があります。幅広い解像度でブラウザーの幅全体をカバーしたい場合は、幅をパーセンテージで指定します。また、コンテナposition:relativeを作成すると、そのtop、left、rightおよびbottomプロパティがアクティブになります。を使用する必要はありませんmargin。これらのプロパティは、親コンテナーに相対的な値を選択します。

于 2013-03-11T14:09:15.957 に答える
0

小さな画面でヘッダーの幅が変わるように max-width を追加してみてください。

.header-wrapper {
  background: url("/images/bg-header.png") no-repeat left top;
  margin: 0 auto;
  min-height: 100px;
  max-width: 1200px;
}
于 2013-03-11T14:09:06.483 に答える