css - 如果浏览器宽度不是 1200 像素宽，如何在防止水平滚动条的同时使用 1200 像素背景？

Question

对于我的页眉，我有一个重复元素，无论浏览器宽度是多少，它都会扩展——2000px、4000px 等。在页眉元素内，我有一个固定的 1200px 宽的背景。我的页面布局是 960px 宽。

如果我将固定设置为 1200 像素，浏览器宽度低于 1200 像素的用户将出现水平滚动条。

我怎样才能让拥有 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;
}

Answer 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和属性处于活动状态。所以你不需要使用. 这些属性选择它们相对于父容器的值。rightbottommargin

Answer 2

尝试添加 max-width 以便标题在较小的屏幕上更改宽度：

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