Safari动态浏览器高度检测答案

【问题标题】：Safari dynamic browser height detectionSafari动态浏览器高度检测
【发布时间】：2023-03-23 23:41:01
【问题描述】：

我试图让页脚粘在浏览器窗口的底部。它适用于 chrome，但不适用于 Safari 或移动版 Safari。

我在 css 中使用 calc 函数。在 Safari 上，页脚在纵向和横向模式下都保持在相同的绝对位置。似乎它没有检测/刷新浏览器高度的变化，这在 Chrome 上运行良好。

#footer{
    position:absolute;
    -webkit-top: calc(100% - 127px);
    top: calc(100% - 127px);
    height: auto;
    width: 100%;
    clear:both;
    overflow:hidden;
}

如何强制 Safari 刷新浏览器高度？

【问题讨论】：

如果您绝对定位元素，则不需要清除浮动。

标签： css safari height footer

【解决方案1】：

给calc()加前缀的正确方法是这样的：

#footer{
    position:absolute;
    top: -webkit-calc(100% - 127px);
    top: calc(100% - 127px);
    height: auto;
    width: 100%;
    overflow:hidden;
}

但是，将元素绝对定位在页面底部通常是通过设置底部属性来完成的，该属性具有更好的浏览器支持：

#footer{
    position:absolute;
    bottom: 0;
    height: auto;
    width: 100%;
    overflow:hidden;
}

【讨论】：