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:
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
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
