时间戳

首页 > 解决方案 > 如何在不增加正文大小的情况下使页脚超出页面末尾

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

问题描述

我想要一个 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 需要在那里工作......

页脚

标签： htmlcssfooter

解决方案

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

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

推荐阅读