On: Avoid 100vh on Mobile Web

[mellonaut]

You can fall back to the oldskool way of setting the height of the parent nodes to 100%:

  html, body, .full-height {
    height:100%
  }

I guess this is exactly the thing the viewport units were designed to overcome, but at least it's a pure css solution.

[macando → mellonaut]

If you have a site that's N screens high and you want to set the height of a div (i.e. an image) so it covers the whole landing area (what the user sees when the site loads) then this code won't help. You have to use vh

[dao- → macando]

Or you use position:fixed?

[macando → dao-]

And set the height to what? Using percentages means 100% relative to the parent. What if the whole site is the parent and that site is 3 screens high? I haven't found the way to make it work without relying on vh or JavaScript.

[jaxn → macando]

Set top: 0; bottom: 0

[macando → jaxn]

Maybe we are talking about 2 different things. I want to stretch the image to the bottom of the visible area not to the bottom of the site. If the height of the parent is 100% and that parent is the site itself and it's 5000px high (because the rest of the content made it that high) then setting the bottom to 0px will stretch the image's height to 5000px.

[goblin89 → macando]

> you want to set the height of a div (i.e. an image) so it covers the whole landing area (what the user sees when the site loads)

I believe “what the user sees when the site loads” is often referred to as “above-the-fold”. “Landing area” may be interpreted to mean the whole landing page. Perhaps repliers were confused by the phrasing.

[macando → goblin89]

Bingo! Above the fold is the more common term. I usually call it "landing area" and the whole thing I call "landing page". Naming is important :)