CSS - Dropbox网站页脚效应?

时间:2014-10-08 06:26:22

标签: html css

请在此处查看dropbox的网站:https://www.dropbox.com

注意页脚"了解更多" 保持在底部,直到您点击或向下滚动,无论您调整窗口大小多少?

position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
cursor: pointer;

以上是页脚部分的CSS,但这不会产生影响。

如何实现这种效果,我无法弄明白。

2 个答案:

答案 0 :(得分:2)

我假设你正在谈论那个总是在整个浏览器窗口填充"了解更多"坚持窗户的底部?

有多种方法可以做到这一点,其中一种方法是:

将您的第一页放在<div>(或任何其他容器)中,并将其高度设置为100vh,这将始终调整到浏览器窗口的高度(100%) 视图高度)。

链接&#34;了解详情&#34;然后使用position: absolute;简单地附加。

以下页面可以采用任何高度,但您可以使用相同的技术制作可以滚动的页面(类似于幻灯片)。

You can try it using this fiddle.

答案 1 :(得分:1)

位置:固定是你想要的,而不是绝对的。