15点40分2022年10月25日---mobile-footer

常用CSS样式

position:

• fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• relative:生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
• static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit 规定应该从父元素继承 position 属性的值。
  display:
• flex:是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。

解决footer位置不正确的问题

在旋转手机屏幕时，fire fox浏览器的搜索栏消失，没通知document窗口大小发生变化，所以document还是认为当前位置是浏览器底部。

<div style=" position: fixed; background: red;height: 100%;z-index: 999999;width: 100vw;"></div>

使用这段代码我们可以看见，当从横屏旋转回竖屏之后，footer位置不在屏幕最下端，但是，他的属性,bottom是0，说明它就是在屏幕最下端，那只能说明现在document认为屏幕显示的最下端不是真正的屏幕下沿，是：整个屏幕高度 - 下方搜索栏的高度，将这个div的height改为100%，颜色改成红色，可以清楚的看到，100%高度并没有到达屏幕最底部。

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;

所以这很有可能是firefox安卓端的一个bug。