一个名为 The Markup 的引人入胜的新网站刚刚 上线。标语：大型科技公司正在监视您。 我们正在监视大型科技公司。来自 Upstatement 的出色作品。内容看起来很棒，但当然，在这里我们也始终对设计和技术感兴趣。从简洁的排版、有趣的布局和块上的大胆倾斜悬停状态到雅致的点状图案，有很多值得喜爱的地方。
页脚也很巧妙，因为它在您滚动到页面底部时看起来像是从内容下方滑出。让我们来制作它！
诀窍在这里
- 主要内容区域至少为
100vh高。大多数网站都是这样，但为了安全起见。 - 主要内容区域也具有纯色背景，覆盖了我们将隐藏在其后面的页脚。
- 页脚位于 HTML 中的主要内容区域之后，因此要确保主要内容区域位于顶部，您需要一点相对定位和 z-index。
- 页脚使用粘性定位将其放置在底部。
最后一个是最花哨的技巧，实际上它比 The Markup 使用的更花哨。他们在页脚上使用position: fixed;，并在主要内容上使用魔法数字margin-bottom使其工作。使用粘性定位时，不需要魔法数字。
这样一个简单的无需魔法数字就能生效的事实非常棒。感谢 Stephen Shaw 提供的粘性技巧！我第一次尝试使用固定定位和魔法数字，但没有它们，使用起来方便多了。
Preethi 在 2018 年向我们展示了一种非常相似的技术。这里的主要区别在于在 body 的背景上使用线性渐变，如果应用纯色以某种方式限制了整体设计，这是一种不错的解决方法。
Keyframers 视频
Stephen 做了一个升级版！
目前形式下，这有一个弱点，即如果页脚的高度超过 100vh，它将被裁剪。
只需添加 top: 0; 即可解决此问题，并在这种情况下导致其回退到正常的页脚显示。
正确。
在页脚上使用
z-index: -1而不是使主要内容定位是否有任何问题？没有。最好对页脚使用负索引，而不是全局主要块。
如果您的页脚中包含任何可点击的内容（例如链接），则不要使用
z-index: -1，因为这会将页脚置于文档后面，虽然内容可见，但您将无法点击页脚中的任何内容。相反，请根据文章的示例，在主要内容块上使用z-index: 1并赋予其position: relative。为什么这个页脚最近受到如此多的关注？我之前见过很多次这种技术……是因为它以不同的方式完成的吗？或者这只是网站的一种偷偷摸摸的广告方式？
是的，我很愤世嫉俗。
这里的技巧是；没有魔法数字。它只是与粘性定位一起工作。
真有趣，我上周注意到了这个网站上的页脚，并且一直想重新创建它。时机再好不过了，感谢分享！
Odoo.com 多年来一直在使用滑动页脚。它确实很酷，当然。
猫的照片让我感到快乐。
这曾经是我与一些设计师合作时的一种趋势。我真的很喜欢它，但它似乎从未流行起来。
当您将元素相互滑动时，需要注意的一件事是重新渲染。检查 Chrome 中的绘制分析器，确保您的滑动页脚不会导致卡顿：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool#rendering-settings
我正在学习 html-css，在这篇文章中，页脚没有像其行为暗示的那样滑出，但它确实覆盖了整个 body 宽度，实现了其 100% 的设置属性，但在文档加载时没有看到滑动动画。
在 main 标签的 css 中，使用了 main-height 并将其设置为 100vh。我的问题是
1. 为什么使用 main-height，为什么不使用 height？
2. 为什么使用 vh 而不是像素，100vh 和 100px 有什么区别？谢谢。
你好，Jelili，
min-height属性用于保证高度至少为100vh——而不是height，后者将明确地将高度设置为100vh（且不高于/低于）。vh单位相对于视口的高度，因此100vh相当于视口高度的 100%。根据以上，这将保证 body 至少与视口相同的高度。非常感谢 Jak。这意味着我需要回到绘图板上学习更多 css 知识。
另一个问题是，当页脚内有链接时，它无法通过键盘进行导航。
这可以通过在页脚上使用
:focus-within选择器来添加position:relative或更高的z-index来解决。