Question

当我向网站的末尾滚动时，我试图在内容后面显示一个页脚，这很难解释所以我做了这个gif

我试图在网上搜索教程，我发现的并不是我正在寻找的东西（我所看到的只是向上滑动并向下滑动页脚）。

如果您可以指导我阅读教程或解释如何操作，那将会有很大帮助。

Answer 1

以下内容应该只使用css。

此解决方案依赖于具有position:fixed的元素的行为方式。此代码意味着在较短的页面上 - 即不会导致滚动条显示的页面，页脚将保持固定在页面底部，而不是内容。

基本上，当用户滚动时，页脚总是附着在窗口/视口的底部，但是大多数时候你看不到它，因为页面的其余部分浮动在它上面 - 这是由此引起的通过使用比页脚更高的页面内容的z-index。通过使用与页脚相同高度的底部边距，我们允许显示页脚的空间，但仅限于页面底部。：）

这应该适用于所有现代浏览器，但是你应该在IE7中进行测试以确保（因为我现在还没有这样做）。

CSS

.rest {
    position: relative;
    z-index: 100;
    background: #fff;
    margin-bottom: 200px;
    overflow: hidden;
}

.footer {
    height: 200px;
    width: 100%;
    background: #000;
    position: fixed;
    bottom: 0;
    z-index: -1;
    color: white;
    text-align: center;
    font-size: 20pt;
}

.footer p {
    margin-top: 50px;
}

标记

<div class="rest">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat
    euismod urna, eget interdum eros elementum in. Morbi dictum molestie
    porta. Morbi eget consectetur nibh. Etiam sed arcu ac elit dignissim
    consequat.
  </p>
  <!-- obviously this content would need to go on for longer to 
       cause the page to scroll //-->
</p>
</div>
<div class="footer">
    <p>This is the footer</p>
</div>

更新

我不太记得，但我认为对于较旧的Internet Explorer，负的z-index可能会将页脚置于body层之下.. （意味着它根本不可见）因此最好使用z-index:2表示.rest和z-index:1作为页脚。我没有机会测试一下，但我会尽快更新。

内容背后的页脚

1 个答案:

CSS

标记

更新