CSS如何创建可揭开的页脚答案

【问题标题】：CSS how to create unveilable footerCSS如何创建可揭开的页脚
【发布时间】：2013-12-03 06:59:08
【问题描述】：

我想在elementaryos.org 上创建类似页脚的页脚我不知道是什么 css 代码使页脚位于页面容器下方，并且在我们向下滚动时会显示出来。

<!doctype html>
<html lang="en">
<head>
    <title>Test page</title>
    <style type="text/css">
    body{
        margin: 0px;
        padding: 0px;
    }
    nav{
        background-color: yellow;
        width: 100%;
        position: fixed;
        z-index: 2;
        height: 70px;
    }
    .container{
        padding-top: 80px;
        width: 100%;
        background-color: #dadada;
        position: relative;
        z-index: 1;
        line-height: 3em;
    }
    footer{
        background-color: #bababa;
        height: 200px;
        width: 100%;
        position: relative;
        z-index: 0;
    }
    </style>
</head>
<body>

<nav>
<h1>Navigation</h1>
</nav>

<div class="container">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum enim odio, vel placerat dui aliquam sed. Vivamus rhoncus massa commodo nulla scelerisque accumsan. Nunc ac ligula velit. Mauris eu pharetra turpis, eget fermentum lectus. Maecenas ornare sem vel nisi accumsan, at placerat libero vulputate. Pellentesque sit amet neque ac est dapibus faucibus. Morbi pellentesque, dolor ut elementum mattis, lectus nunc auctor nulla, vel lobortis quam ante eu neque.

Mauris sed ligula in lorem rhoncus volutpat. Ut pulvinar dolor id bibendum mollis. Morbi eu facilisis risus. Nullam quis eros elit. Donec quis facilisis dui. Duis hendrerit, lectus id ultrices tincidunt, urna tellus convallis quam, eget vehicula ipsum arcu vitae nulla. Etiam tristique varius enim nec volutpat. Fusce non odio nec massa placerat aliquam id eu ligula. Nam nulla urna, iaculis sit amet nisi non, auctor congue magna. Suspendisse potenti. Duis vehicula consectetur feugiat.

Quisque ut luctus diam. Aliquam quis blandit eros. Vestibulum dolor velit, egestas non vehicula et, viverra in lacus. Donec luctus id libero at tincidunt. Donec in euismod tortor, id fermentum mi. Phasellus leo dui, placerat sed enim elementum, aliquet convallis mauris. Duis cursus mauris vehicula tortor auctor faucibus. Praesent euismod enim eget luctus facilisis. Donec condimentum, neque id convallis consectetur, lorem ipsum gravida nisl, vel fermentum lectus diam at magna. Aenean in urna sagittis, condimentum magna nec, egestas neque. Nulla gravida neque massa.

Nulla consequat, quam at fringilla mollis, nunc magna dapibus eros, ut ultrices sapien mauris eu libero. Duis sollicitudin orci posuere est vulputate, eu vestibulum mi vestibulum. Etiam eu elementum nisi, consectetur accumsan turpis. Sed dignissim sapien et posuere interdum. In adipiscing gravida enim vestibulum suscipit. Aliquam aliquet sem et dapibus mollis. Praesent quis lorem augue. Donec facilisis justo vel est pharetra, eget rhoncus magna ultricies. Suspendisse ac justo quis dui accumsan dignissim at non sapien. Cras vitae ultrices justo, quis venenatis nibh. Sed vestibulum adipiscing enim non volutpat. Duis ac euismod sapien. Pellentesque sit amet ornare velit. Duis venenatis tempus facilisis.

Sed sem lectus, mattis ut nunc sit amet, dictum sollicitudin sapien. Integer vitae ornare tellus. Vestibulum et cursus urna, vel aliquet mi. Duis lacinia tincidunt lorem. Cras sem felis, bibendum eu lorem luctus, dictum imperdiet augue. Quisque eleifend lectus pellentesque arcu faucibus tempus. Etiam sollicitudin in est eu lacinia. Curabitur faucibus in neque et imperdiet. Mauris libero enim, suscipit sit amet odio eget, molestie ornare ligula. Nam a lorem convallis, ornare nibh id, viverra tellus. 
</div>
<footer>
    Page footer
</footer>
</body>
</html>

这里是demo。非常感谢。

【问题讨论】：

这个小提琴：jsfiddle.net/zVLrb 展示了它是如何完成的。在stackoverflow.com/questions/13095684/footer-behind-content 提到过

标签： html css

【解决方案1】：

你去：http://jsfiddle.net/8cxvr/2/

这很简单，只需给页脚一个固定的位置（= 相对于窗口），容器就会在底部获得一些边距。

相关变化：

.footer {
  position: fixed;
  bottom: 0;
}
.container {
  margin-bottom: 200px; /* footer-height */
}

【讨论】：

【解决方案2】：

首先，这是一个可怕的效果，请不要这样做。

不过，对于一个完整的答案，他们所做的是将页脚固定在页面底部，然后给它一个较低的 z-index。所以它总是在位置上。滚动浏览内容后，它就会出现。您可以使用 IE Developer tools 或 Firebug（用于 Firefox）之类的工具来查看它们是如何处理代码的。

【讨论】：

为什么会有这么可怕的效果？我喜欢。我在 Unity3d 演示页面上看到过类似的东西，但现在找不到...
我在 firefox 上使用开发人员工具，但无法弄清楚是什么 css 规则会产生这种效果。顺便说一句，我喜欢这种效果，对我来说没那么可怕
@CedricReichenbach 因为，我滚动的不够远，现在它看起来很丑，好像有一个错误i.imgur.com/0WX6SPD.png
@user1677104 如果您单击
，您会看到它是绝对定位的。如果您查看页脚内的第一个子项，您会发现它具有固定的定位。
显示小提琴中的页脚的方式就像揭幕一样。就好像网页被抬起以“揭开”下面的页脚。弹出式页脚对 imo 极具侵入性，尤其是在像素有限的移动设备上