2

For a special project, I need to use a scrollable box that has exactly a height of 100vh respectively 100%.

Basically, it looks like that:

* {
  margin: 0;
  padding: 0;
}

html {
  font-family: Arial;
  font-size: 10vh;
}

html,
body {
  position: fixed;
  width: 100%;
  height: 100%;
}

#content {
  overflow-y: scroll;
  height: 100%;
  width: 100%;
  background-color: red;
}
<div id="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
  et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
  aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

On my iPhone this is the result:

enter image description here

Now, if I start scrolling, the bottom browser bar disappears and creates a white gap: enter image description here

I have already tried to fix it with -webkit-fill-available; and to resize the height to 100% with every touch via JavaScript. Unfortunately, all my tries didn't work.

Basically, the height of the page should be updated if the browser bar disappears. Has someone an idea to fix that?

Would be very thankful for help <3

Anna_B
  • 820
  • 1
  • 4
  • 23
  • Does this answer your question? [White area on fixed background when scrolling on ios](https://stackoverflow.com/questions/32417663/white-area-on-fixed-background-when-scrolling-on-ios) – Looping Apr 21 '23 at 13:59

3 Answers3

1

you can add to red block css transform: translateY(100px);

AlexDuff
  • 11
  • 1
0

A Stack user answered to your question about the white gap, check this link => https://stackoverflow.com/a/33246118/16539101

I tried it. It works like a charm :

.background-img {
   transform: translate3d(0,0,0);  
}
Looping
  • 36
  • 5
0

Adding these codes to the fixed element should fix the issue

height: 100vh;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
Riya
  • 79
  • 2
  • 7