Question

对于我的标题，我有一个重复元素，无论浏览器宽度如何都会扩展 - 2000px，4000px等。在标题元素内，我有一个1200px宽的背景，是固定的。我的页面布局是960px宽。

如果我将fixed固定设置为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;
}

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，right和bottom属性。所以你不需要使用margin。这些属性选择相对于父容器的值。

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;
}

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

2 个答案: