页眉和页脚没有到达网页的边缘答案

【问题标题】：Header and Footer Doesn't Reach the Edges of Webpage页眉和页脚没有到达网页的边缘
【发布时间】：2017-05-25 08:55:08
【问题描述】：

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

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

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

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

https://jsfiddle.net/t5gb4as7/

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>

【问题讨论】：

标签： html css header footer

【解决方案1】：

你可以使用百分比作为宽度，让它像这样响应

宽度：100%；

【讨论】：

如果我改为使用width: 100%，那么当我调整浏览器大小时，我的 HTML 内容会改变位置。使用width: 1060px;，我可以调整浏览器的大小，同时保持所有 HTML 内容的位置
是的，但我认为将页面中的内容设为静态并不是最佳做法，因为有引导程序和其他框架来应用响应式设计。
我不喜欢 Stack Overflow 的网站……如果在调整大小时发生移动，它会弄乱我网页的格式和外观
所以你现在需要这样的东西我了解你stackoverflow.com/questions/14526071/…
在我看来，您应该在 div 上设置宽度而不是 h 标签。也像我已经回答的那样在 div 上设置背景图像而不是 h 标签。

【解决方案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>

【讨论】：

你能提供一些代码来说明它的外观吗？我试着按照你说的去做，如果我理解你的话，那就行不通了
我添加了一些非常基本的 HTML 和 CSS 来说明我在说什么。我个人使用带有 id="header" 的 div 标签而不是专用的标题 HTML 标签。如果需要，您可以使用特殊的标头标记，但我认为它仅受更现代的浏览器支持。