CSS VH - my site goes on forever on iPad!

Discussion in 'Web Design and Development' started by gwelmarten, Nov 22, 2014.

  1. gwelmarten macrumors 6502

    Joined:
    Jan 17, 2011
    Location:
    England!
    #1
    Hi there,

    I've been trying to add a static picture below the content of my website, using VH units in CSS (i.e. a div is a proportion of the size of the screen, regardless of what other divs it inside).

    This seems to work on all platforms (iPhone, Android phones and tablets, Mac, even Internet Explorer!) except iPad. Where the page ends and instead of a div of about 70% of the screen height, there's one of about 100x the height of the screen.

    The site is http://heather.sh.

    If you view on a computer and scroll to the bottom, you should see a photo before you reach the bottom, and at the bottom you can still see the end of the page content at the top of the screen. This is achieved with the following CSS:
    Code:
    <div style="height:68vh;"></div>
    Does anyone have any idea why this is happening (and could someone confirm it is happening on iOS 8 Safari as well please?)? Any ideas for a fix?

    Thanks!

    Sam
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    Seems to work fine in Safari on my iPad in iOS 8
     
  3. gwelmarten thread starter macrumors 6502

    Joined:
    Jan 17, 2011
    Location:
    England!
    #3
    Hmm...I suspected it might. It works fine in the iOS 8 iPad simulator as well. But not iOS 7...weird! I just set a max-height as a kind-of work around. But I'm going to keep digging and see if I can find out why it happens.
     

Share This Page