Search code examples
cssipadoverflowbackground-imagesticky-footer

Overflow:Hidden, Background-image:Cover, Anchors and Tablets

I am creating a page that does not scroll vertically. Here is the problem page for reference - http://horizonwebtest.zxq.net/knowledgebase/

It has worked well with the exception of 2 things:

  1. When viewing on iPad (possibly other tablets), the footer is pushed up approximately 10 px and the background image shows below the footer.

  2. More importantly, on the above linked page, when I click on a link for an anchor that is inside a div, it scrolls the page up, showing space below the footer and partially cutting off the menu.

Is there something I'm missing?

Solution

  • I was able to fix it by doing the following:

    1.) Setting the h6 inside the .footer-left.fltlft div to margin-top: 20px;

    2.) Removing the padding-top: 20px from the div itself

    3.) Setting margin-bottom:0; on the h5 inside the .footer-right.fltlft div.

    As a side note, do your vertical text centering with line height, it works a lot better and will help prevent these kinds of issues.