-1

I try to make a view fill 100vh in every device at every browser. I found the solution to do like this.

html {
    height: 100vh;
    height: -moz-available; 
    height: -webkit-fill-available; /* WebKit-based browsers will ignore this. */
}

body {
    height: 100vh;
    height: -moz-available; /* Mozilla-based browsers will ignore this. */
    height: -webkit-fill-available; /* WebKit-based browsers will ignore this. */
}

It works correctly in Chrome but in Safari on iPad it looks like this.

enter image description here

It should be like this: enter image description here

Do you have any suggestions? Thank you!

jansemrau
  • 231
  • 3
  • 11

1 Answers1

1

Safari uses a WebKit engine; remove height: -webkit-fill-available;

  • Then it won't work in firefox, yes? – TorNato Jul 16 '22 at 09:50
  • @TorNato Apologies pasted the wrong code. –  Jul 16 '22 at 09:53
  • Sorry, it didn't work... I have to scroll a little bit at safari on iPad. I updated the question – jansemrau Jul 16 '22 at 10:46
  • @jansemrau Change the height in that case but in this class ```_::-webkit-full-page-media, _:future, :root .safari_only ``` For more info refer to this question https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome –  Jul 16 '22 at 10:53
  • @jansemrau I would adivse you to increase the height to auto. –  Jul 16 '22 at 11:04
  • The problem still exists... The thing is, that it is not a specific safari problem. It is a safari problem on the iPad... – jansemrau Jul 16 '22 at 11:35
  • @jansemrau In that case take a look here https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser –  Jul 16 '22 at 11:41
  • @jansemrau can you accept the answer if it helped you out please? Just click on the tick. Thank you and You're welcome! –  Jul 16 '22 at 11:45