Question

我有一个图片作为我的页眉和页脚，它没有到达我的网页边缘。如果我的浏览器全屏，它看起来不错。但是如果我缩小网页，那么它会在到达边缘之前在右侧切断。

如何解决此问题，以便无论浏览器的大小如何，页眉和页脚都可以100％左右到达？

我将HTML放在容器中，以便在调整浏览器大小时不改变位置。这是我的CSS和HTML如何设置的要点......

这是一个显示我的问题的JSFiddle。如果你扩展窗口，你会发现页眉/页脚占据了它应该的每一英寸。但是，如果没有，您可以看到右侧的空白区域：

CSS：

.container {
      margin: 0 auto;
      width: 1060px;
    }

/* header */
h2 {
    color: transparent;
    background-image: url('header-footer.png');
    width: 100%;
    height: 102px;
    margin-bottom: 20px;
}

/* footer */
h3 {
    color: transparent;
    background-image: url('header-footer-turn.png');
    width: 100%;
    height: 102px;
}

HTML：

<body>

<div class="wrapper">

      <header>
          <h2>test</h2>
      </header>

<div class="container">

    //more
    //html code
    //here

</div>

<div class="push"></div>
</div>

<div class="footer">
<footer>
    <h3>test</h3>
</footer>

</div>

Answer 1

您可以使用百分比作为宽度，使其像这样响应

宽度：100％;

Answer 2

我会在div上设置背景图像，而不是像你现在那样设置h2或h3标签。 div宽度应为100％，然后它将应对桌面和移动。

如果您愿意，可以使用CSS媒体查询加载不同屏幕尺寸的不同背景图像。

#header {
  width: 100%;    
  background-image: url('images/name-of-background-image.jpg');
}

<div id="header">
  <h1>Your header info here.</h1>
  </div>

页眉和页脚不会到达网页的边缘

2 个答案: