如何在不增加正文大小的情况下使页脚超出页面末尾答案

【问题标题】：how can i make footer go beyond end of page without increasing body size如何在不增加正文大小的情况下使页脚超出页面末尾
【发布时间】：2020-01-17 20:09:48
【问题描述】：

我想要一个 100 像素的页脚，但是当滚动被“下推”时，它也会显示在页面末尾之外，即。滚动到页面末尾并继续滚动，之后浏览器将自动将其拉回。这个概念就像在 html 元素上设置颜色。我不能让它显示在正文之外：

<footer style="position:absolute;bottom:-100px;
  left:0; width:100%;height:100px;">
<div style="width:100%; height: 300px;
  background-image:url('/img.jpg')"></div>
</footer>

这将增加页面的高度，如果我设置溢出：隐藏然后我没有得到我想要的效果。有没有办法做那种事情。我想要一个 div，因为我有一些 JS 需要在那里工作......

【问题讨论】：

所以你只是想要一个很酷的页脚向上滚动的效果？
另外，你还可以使用 JQuery 吗？
假设您使用的是移动设备。您转到页面底部，然后用手指继续向上拉。通常你会看到空格。我想要页脚背景。
我不确定你想要什么是可能的。移动浏览器使用此效果向用户发出他们已到达页面末尾的信号。如果您使用任何方式将内容“进一步向下”放置 - 它只会移动相应应用效果的点。我认为您最多可以完全禁用该效果-developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
是的，我不认为这就是我要问的原因）它不仅适用于移动设备，但桌面设备也是如此。我个人认为内容反弹时不会有任何可用性问题......

标签： html css footer

【解决方案1】：

你想要完成的事情是不可能的。你能做的最好的就是改变显示的颜色。

<html>
<head></head>
<body style='margin: 0px; background-image: url("https://stackoverflow.com/favicon.ico"); background-color: red;'>
  <main style="padding: 8px;background:white;">
<h1>Body</h1>
<p>
  body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
  <br>body<br>body<br>body<br>body<br>body<br>body<br>body
</p>
  </main>
  <footer style="display:block;position: relative;height: 100px; overflow:hidden">
<div style="width:100%; height: 300px; background-color: red; background-image:url('https://stackoverflow.com/favicon.ico');">
</div>
  </footer>

</body>
</html>

【讨论】：