html页脚固定到底部

如何在移动端实现固定头部和页脚的页面布局？

那天我在地铁上浏览消息应用程序时，突然发现固定在顶部的导航栏特别稳定。
无论我如何移动文章内容，导航栏始终固定在顶部。
我想知道如何才能实现这一目标。
后来我花时间去挖了源码，嘿嘿，果然是Flexbox的作品。

看，这个布局的核心包括三个步骤： 1 、将整个页面视为一个垂直的flex容器，并应用display:flex；弯曲方向：列；正文文本上，以便页眉、内容和页脚可以从上到下排列。
2 、页眉和页脚都使用position:sticky；顶部：0；底部：0；并使用 z-index:1 0 来防止它们被内容区域中出现的元素遮挡。
特别有趣的是，当头部最初未固定时，它看起来像一个粘性贴纸，在锁定到位之前会滑入到位 - 这里的“粘”比“固定”更聪明。
3 、输入flex：1 ；进入内容区域并自动填充所有剩余空间。
无论手机屏幕是iPhone 1 3 还是Pixel 6 ，内容区域的高度始终是可调的。

后来我尝试使用绝对定位并手动计算高度计算（1 00vh
1 00px）。
这导致华为 P4 0 上的滚动条闪烁两次。
这让我想起了我在旧项目中使用双翼布局的日子。
写完浮动+负边距后，我仍然不得不使用兼容性技巧。
现在想想真是一种折磨。

等等，还有一件事：在 Safari 中测试时，我注意到当页眉和页脚的组合高度超过视口高度的 1 .5 倍时，Sticky 的行为异常。
此时需要添加一个hack，使用@supports(position:sticky)判断浏览器是否支持，如果不支持则返回position:fixed。

突然发现现在很多小程序框架都默认使用Flexbox布局，或许是因为这种组合特别好用。
但为什么Android厂商在定制界面时仍然使用老式的绝对定位呢？

HTML语义标签Footer怎么用_HTML页面底部信息Footer标签

哎呀，说到