巧妙なスティッキーフッターテクニック

「スティッキーフッター」に関しては、ほとんどの人は最近position: sticky ：親要素のスクロールのコンテキストでは、フッター要素が画面に固定されています。

しかし、これはこの記事の焦点では​​ありません。 「スティッキーフッター」の概念はposition: stickyよりも早く表示され、その意味はわずかに異なっていました。アイデアは、ページのコンテンツがそれを下に押し込むのに十分ではない場合でも、画面の下部に固執します。しかし、十分なコンテンツがある場合は、以下にプッシュされてうれしいです。

calc() 、FlexBox、CSSグリッドなどの最新のテクノロジーを含む、過去に5つの実装方法を導入しました。

さて、6番目の方法がステージにあります！読者のSílvioRosaは次の方法を提案しました。

（この画面のサイズではほとんど効果的であるため、中型のデスクトップ画面で表示するのが最善です。）

コードは非常に簡潔です：

 html、body {height：100％;}

ボディ>フッター{
  位置：粘着性;
  トップ：100VH;
}

私がそれについて感謝していることの1つは、フッター以外のコンテンツに特別な追加のラッパーを必要としないことです。

また、少し不可解です。 top: 100vh;視覚領域の外側にフッターを押しているため、これは機能しないと思います。しかし、それはまさに賢さです。フッターサイズ（魔法の数字は不要）に関係なく、そうします。そして、粘着性のある位置は、「それを吸う」ために「それを吸います」。しかし、コンテンツと重複することはないので、コンテンツの下でプッシュされてうれしいです。これは、スティッキーフッターパターンの核となる原理です。

以上が巧妙なスティッキーフッターテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。