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

Question

我试图让页脚粘到浏览器窗口的按钮上。它适用于Chrome，但不适用于Safari或移动Safari。

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