TL;DR
If you want to have a full-page container div, make sure you have these:
/* override browser default */
html,
body {
margin:...
For further actions, you may consider blocking this person and/or reporting abuse
The one problem with vh is when you scroll on mobile and its address bar hides it changes its value to a larger one. If your page has a bunch of hero style sections on the page at 100vh this causes the page to jump the scroll position every time you scroll the page up and down and the address bar hides or shows
Yeah unfortunately the
vh
unit is almost useless on iOS Safari. I believe the trick is to useheight: 100%
onhtml
element and then pass that down to the body and any container with flex or grid.developers.google.com/web/updates/...
Yes that only works on items at the top for heros. It doesn't allow you to use it mid-page.
It's a well konwn issue. I solved it just using JavaScript on load to set the height and add data-vh="100" where you can pass in a percentage of the view height then it sets it to pixels after load. I will enhance it to detect resizing from address bar hiding (perhaps if resize happens at same time as scroll) vs normal resizing and sort it that way.
Thanks for the heads up. I didn't get a chance to try this yet on iOS or Safari. I'll test it out and add it to the article
Thanks! I'll try to repro and add a note to the article.
What about this?
It's enough to fill entire page without effort.
Thanks for the note. Yes, this is definitely another way to do this. For this post though, I wanted to explore more of an alternative "relative" solution without using absolute positioning and dealing with z-index.
I was expecting to see
position:absolue (or fixed),
width:100%,
height:100%,
top: 0,
left: 0
on the targeted div... Good to know
This is not working in 2021. Instead of full document height, html and body is 100% from the viewport, not the whole document.
Yeap, that is unfortunately the state of web programming. Every year, every month, something breaks.
So what is the solution now?
This article should get more likes!
Interesting.
Thank you so much! I'm learning and HTML and CSS, and I've been racking my head trying to figure out why my webpage wasn't fitting to the screen! I had width set to 100% on my html and body tags already; the box-sizing tip fixed everything with my layout!
Thanks for this article!
Note, you have a small typo in the first code box. There's a stray colon.
should be
Thanks for the catch!