some-things-you-oughta-know-when-working-with-viewport-units

David Chanin has a quickie article summarizing a problem with setting an element’s height to 100vh in mobile browsers and then also positioning something on the bottom of that.

Summarized in this graphic:

The trouble is that Chrome isn’t taking the address bar (browser chrome) into account when it’s revealed which cuts off the element short, forcing the bottom of the element past the bottom of the actual viewport.

.full-page-element {
  height: 100vh;
  position: relative;
}

.full-page-element button {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

You’d expect that button in the graphic to be visible (assuming this element is at the top of the page and you haven’t scrolled) since it’s along the bottom edge of a 100vh element. But it’s actually hidden behind the browser chrome in mobile browsers, including iOS Safari or Android Chrome.

I use this a lot:

body {
  height: 100vh; /* Nice to not have to think about the HTML element parent */
  margin: 0;
}

It’s just a quick way to make sure the body is full height without involving any other elements. I’m usually doing that on pretty low-stakes demo type stuff, but I’m told even that is a little problematic because you might experience jumpiness as browser chrome appears and disappears, or things may not be quite as centered as you’d expect.

You’d think you could do body { height: 100% }, but there’s a gotcha there as well. The body is a child of which is only as tall as the content it contains, just like any other element.

If you need the body to be full height, you have to deal with the HTML element as well:

html, body { 
  height: 100%;
}

…which isn’t that big of a deal and has reliable cross-browser consistency.

It’s the positioning things along the bottom edge that is tricky. It is problematic because of position: absolute; within the “full height” (often taller-than-visible) container.

If you are trying to place something like a fixed navigation bar at the bottom of the screen, you’d probably do that with position: fixed; bottom: 0; and that seems to work fine. The browser chrome pushes it up and down as you’d expect (video).

Horizontal viewport units are just as weird and problematic due to another bit of browser UI: scrollbars. If a browser window has a visible scrollbar, that scrollbar will usually eat into the visual space although a value of 100vw is calculated as if the scrollbar wasn’t there. In other words, 100vw will cause horizontal scrolling in a way you probably wouldn’t expect.

See the Pen


CSS Vars for viewport width minus scrollbar
by Shaw (@shshaw)


on CodePen.

Our last CSS wishlist roundup mentioned better viewport unit handling a number of times, so developers are clearly pretty interested in having better solutions for these things. I’m not sure what that would mean for web compatibility though, because changing the way they work might break all the workarounds we’ve used that are surely still out in the wild.

17 comments

  1. Thanks for your marvelous posting! I really enjoyed reading it, you’re a great author.I will be
    sure to bookmark your blog and will often come back later on. I want to encourage you to ultimately continue your great work, have a nice morning!

  2. I feel this is one of the most significant info for me.

    And i am glad reading your article. But want to statement on some basic things,
    The web site taste is perfect, the articles is truly nice : D.
    Good process, cheers

  3. Heya i am for the first time here. I came across this board and I find It
    truly useful & it helped me out much. I am hoping to offer
    something again and aid others such as you aided me.

  4. Have you ever considered publishing an ebook or guest authoring on other blogs?
    I have a blog centered on the same subjects you discuss and would
    really like to have you share some stories/information. I know my viewers would value your work.
    If you’re even remotely interested, feel free to send me
    an e-mail.

  5. Hey just wanted to give you a quick heads up
    and let you know a few of the pictures aren’t loading properly.
    I’m not sure why but I think its a linking issue.
    I’ve tried it in two different internet browsers and both show the same results.

  6. I like the helpful info you provide in your articles.
    I will bookmark your weblog and check again here frequently.
    I’m quite sure I’ll learn many new stuff right
    here! Good luck for the next!

  7. Please let me know if you’re looking for a article author for your
    site. You have some really great articles and I think I would be a good asset.

    If you ever want to take some of the load off, I’d really like to write some content for your blog in exchange for a link back to
    mine. Please blast me an email if interested.
    Cheers!

  8. Hello! I know this is somewhat off topic but I was wondering which blog platform are you using for this website?
    I’m getting sick and tired of WordPress because I’ve had
    problems with hackers and I’m looking at alternatives for another platform.
    I would be awesome if you could point me in the direction of a good platform.
    ps4 games https://bitly.com/3nkdKIi ps4 games

  9. Can I just say what a comfort to uncover
    a person that truly knows what they are discussing on the net.

    You certainly realize how to bring a problem to light and make it important.
    More and more people really need to check this out and understand this side
    of your story. I can’t believe you aren’t more popular because you surely possess the gift.

    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

Leave a Reply

Your email address will not be published.