html - CSS - Dropbox 网站页脚效果？

Question

在此处查看保管箱的站点:https://www.dropbox.com

请注意页脚“了解更多”如何保持在底部，直到您单击或向下滚动，无论您调整窗口大小多少？

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

上面是页 footer 分的 CSS，但这不会产生效果。

这个效果怎么实现，我想不通。

Answer 1

我假设您是在谈论那个总是充满整个浏览器窗口的首页，“了解更多”贴在窗口底部？

有多种方法可以做到这一点，这里是一个:

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

然后使用 position: absolute; 简单地附加链接“了解更多” .

随后的页面可以采用任意高度，尽管您可以使用相同的技术制作可以滚动浏览的页面(类似于幻灯片)。

You can try it using this fiddle.