聪明的粘页技术

提到“粘性页脚”（sticky footer），如今大多数人想到的都是position: sticky：在父元素滚动上下文中，页脚元素固定在屏幕上的情况。

但这并非本文讨论的重点。“粘性页脚”的概念早于position: sticky出现，其含义略有不同。其理念是：即使页面内容不足以将其推到底部，它也会粘附在屏幕底部。但如果内容足够多，它也会很乐意被推到下方。

我们过去介绍了五种实现方法，其中包括一些现代技术，例如calc()、Flexbox和CSS Grid。

现在，第六种方法闪亮登场！读者Sílvio Rosa提出了以下方法：

（最好在中等大小的桌面屏幕上查看，因为粘性页脚主要在这种屏幕尺寸下最有效。）

代码非常简洁：

html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}

我欣赏它的一点是，它不需要为非页脚内容添加任何特殊的额外包装器。

它也略微令人费解。当我看到top: 100vh;时，我想这不会起作用，因为它会将页脚推到可视区域之外。但这正是巧妙之处。无论页脚大小如何（无需魔法数字），它都会这样做，然后粘性定位会将其“吸回”以粘附在底部边缘。但它永远不会与内容重叠，因此它乐意被推到内容下方，这是粘性页脚模式的核心原则。

以上是聪明的粘页技术的详细内容。更多信息请关注PHP中文网其他相关文章！