聰明的粘頁技術

提到“粘性頁腳”（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中文網其他相關文章！