Question

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

我正在使用css中的calc函数。在Safari上，页脚在potrait和横向模式下都保持相同的绝对位置。它似乎没有检测/刷新浏览器高度的变化，这在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;
}

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

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

Safari动态浏览器高度检测

1 个答案: