0

I am trying to make a page where I have "slides" stacked and the user has to scroll. Each slide is supposed to fill the entire viewport. So I have this CSS:

html,
body,
.slide {
  height: 100%;
}

And in my HTML I simply have

<div class="slide">
  <!-- Content Slide #1 here -->
</div>
<div class="slide">
  <!-- Content Slide #2 here -->
</div>

And it works great. The problem is that on my iPhone, the second slide is not tall enough.
It's size seems to be calculated with the scrollbar on top, but as I scroll down, there is no scrollbar. I suppose I need jQuery to fix this, but how do I do it?

Sven
  • 12,997
  • 27
  • 90
  • 148
  • Check my answer to similar question, might help a little http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems – Dmitry Semenov Mar 30 '13 at 11:44

1 Answers1

0

If you want to use jQuery you can you this

if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
   $('.slide').css({'height':'100%'});
}
David Chase
  • 2,055
  • 1
  • 18
  • 25
  • Sorry, but no thats not working. It is exactly the same that I have already specified in my CSS file. – Sven Mar 04 '13 at 13:26
  • did you try a different height between the if statement above? – David Chase Mar 04 '13 at 13:29
  • @Sven how about setting min-height to 100% – MimiEAM Mar 04 '13 at 13:30
  • Yes I tried different heights (but in my CSS), but that's just a hit & miss method. @MimiEAM Didn't do anything. I just tested it with a px value: If I set height to 416px its perfect on the iPhone 4 - on the 5 it will break probably because its a px value. – Sven Mar 04 '13 at 13:38
  • @Sven convert that 416 to em so that it adapt to different devices – MimiEAM Mar 04 '13 at 17:39
  • @MimiEAM Sorry to tell you, but that won't work at all. I need to size the div in relation to viewport size, not text size. – Sven Mar 04 '13 at 17:50
  • @Sven it's RWD, em works on text as well as div size - have a look at media queries for instance - you can have @ media all and (min-width: 43.75em). and since the viewport is so important use media queries to adjust for each device if you don't want to use em – MimiEAM Mar 04 '13 at 17:56
  • @MimiEAM Yes, but what if a device other than iPhone opens the page? There the 416px/26em can be wrong because the slides have to be 100% high regardless of browser or device, not 416px. – Sven Mar 04 '13 at 18:01
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25544/discussion-between-mimieam-and-sven) – MimiEAM Mar 04 '13 at 18:13