Safari dynamic browser height detection

Question

I'm trying to make footer stick to the buttom of the browser window. It works in chrome, but not in Safari or mobile Safari.

I'm using the calc function in the css. On Safari the footer just stays in the same absolute position in both potrait and landscape mode. It seems as it does not detect/refresh the change of browser height which works fine on Chrome.

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

How do I force Safari to refresh browser height?

You shouldn't need to clear floats if you're absolutely positioning the element. — cimmanon

cimmanon cimmanon · Accepted Answer · 2013-05-27T19:33:23

The correct way to prefix calc() is like this:

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

However, absolutely positioning an element at the bottom of the page is typically done by setting the bottom property, which has greater browser support:

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

Safari dynamic browser height detection

1 Answers