css - Safari动态浏览器高度检测

Question

我试图让页脚粘在浏览器窗口的底部。它适用于 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 刷新浏览器高度？

Answer 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;
}