页尾内容 [英] Footer behind content

问题描述

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

I'm trying to do a footer the shows behind the content when scrolling towards the end of the website, it's hard to explain so I did this gif

< a href =http://imageshack.us/f/687/newdw.gif/ =nofollow> http://imageshack.us/f/687/newdw.gif/

我试图在网上搜索教程，我发现不是我想要的（我看到的都是向上滑动和向下滑动页脚）。

I've tried to search around the web for tutorials and what I find is not what I'm looking for (all I've seen is slide up and slide down footer).

如果你能指点我的教程或解释如何做，可以帮助很多。

Would help a lot, if you can point me to a tutorial or explain how to do it.

推荐答案

以下应该做你想要的，只使用css。

The following should do what you want, using only css.

http://jsfiddle.net/zVLrb/

这个解决方案依赖于 position：fixed 表现。此代码意味着在较短的页面上，即不会导致出现滚动条的页面，页脚将保持固定在页面底部，而不是内容。

This solution relies on the way elements with position:fixed behave. This code will mean that on shorter pages - i.e. ones that do not cause a scroll bar to appear, the footer will remain fixed to the bottom of the page, rather than the content.

基本上，页脚始终连接到窗口/视口的底部，因为用户滚动，但在大多数时间，你不能看到它，因为页面的其余部分浮在上面 - 这是造成的通过使用比页脚更高的z-index的页面内容。通过使用与页脚相同高度的底边距，我们允许页脚的空间出现，但只在页面的底部。 ：）

Basically the footer is always attached to the bottom of the window/viewport, as the user scrolls, but for the majority of the time you can't see it because the rest of the page is floating above it - this is caused by using a higher z-index for the page content than the footer. By using a bottom margin the same height as the footer, we allow a space for the footer to appear, but only at the bottom of the page. :)

这应该适用于所有现代浏览器，但是你应该测试在IE7只是为了确保（因为我现在没有手）。

This should work fine for all modern browsers, however you should test in IE7 just to make sure (as I don't have that to hand right now).

.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;
}

标记

markup

<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-索引可能会将页脚放在正文图层下。（意味着它根本不可见） em>，因此对于.rest和 z-index：1 最好使用 z-index：2 页脚。我没有机会来测试一下，但会更新，当我可以。

update

I can't quite remember but I think with older Internet Explorer a negative z-index might put the footer below the body layer.. (meaning it wont be visible at all) so it may be best to use z-index:2 for .rest and z-index:1 for the footer. I wont have a chance to test that for a bit, but will update when I can.

这篇关于页尾内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！