3

我有一个固定背景的页面，底部有一个浮动页脚。

由于 OS X 上的“过度滚动”，用户可以滚动到页面底部，此时背景会显示在页脚下方。我不想为我的页面禁用过度滚动，我只想将底部扩展到div页面底部下方以覆盖背景。

如何在不增加页面高度的情况下做到这一点？如果我调整 的大小div，可滚动区域只会扩展以匹配。我见过这个问题，但这涉及隐藏元素，这意味着它不再覆盖背景。

有没有办法隐藏页面下方的过度滚动区域中的元素？

这是一个GIF：

当您“过度滚动”时，您可以在屏幕底部的白色区域下方看到背景显示。我不想防止过度滚动，但我想div在页面底部用白色隐藏背景。

4

1 回答 1

1

在没有看到小提琴的情况下，我的第一个想法就是完全按照您所说的去做：增加底部 div 的高度以覆盖多余的滚动。像这样：

.bottom-container {
  position: relative;
  height: /* current height + overflow amount of height */
  top: /* overflow amount of height */
}

所以如果你的底部容器是 400px：

.bottom-container {
  position: relative;
  height: 600px;
  top: 200px;
}

只要没有overflow: hidden应用于页面，这样的东西理论上应该可以工作。

body {
  margin: 0;
  padding: 0;
}
.fixed-background {
  position: fixed;
  height: 100vh;
  width: 100%;
  background: tomato;  
}
.fixed-placeholder {
  height: 100vh;
  background: transparent;
}
.bottom-container {
  position: relative;
  height: 400px;
  width: 100%;
  background: white;
  top: 200px;
}
<div class="fixed-background">
  <h1>Fixed Background</h1>
</div>
<div class="fixed-placeholder"></div>
<div class="bottom-container">
  <h2>More content down here</h2>
</div>

于 2016-06-24T03:19:07.500 回答