{"id":311173,"date":"2020-05-15T14:45:56","date_gmt":"2020-05-15T21:45:56","guid":{"rendered":"https:\/\/css-tricks.com\/?p=311173"},"modified":"2020-05-18T14:17:26","modified_gmt":"2020-05-18T21:17:26","slug":"css-fix-for-100vh-in-mobile-webkit","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-fix-for-100vh-in-mobile-webkit\/","title":{"rendered":"CSS fix for 100vh in mobile WebKit"},"content":{"rendered":"\n

A surprisingly common response when asking people about things they’d fix about anything<\/em> in CSS, is to improve the handling of viewport units. <\/p>\n\n\n\n

One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw<\/code> and stretches edge-to-edge, that’s fine so long as the page doesn’t have a vertical scrollbar. If it does have a vertical scrollbar, then 100vw<\/code> is too wide, and the presence of that vertical scrollbar triggers a horizontal<\/em> scrollbar because viewport units don’t have an elegant\/optional way of handling that. So you might be hiding overflow on the body when you otherwise wouldn’t need to, for example. (Demo<\/a>)<\/p>\n\n\n\n

Another scenario involves mobile browsers. You might use viewport units to help you position a fixed footer along the bottom of the screen. But then browser chrome might come up (e.g. navigation, keyboard, etc), and it may cover the footer, because the mobile browser doesn’t consider anything changed about the viewport size.<\/p>\n\n\n\n\n\n\n\n

Matt Smith documents<\/a> this problem: <\/p>\n\n\n\n

\"\"
On the left, the browser navigation bar (considered browser chrome) is covering up the footer making it appear that the footer is beyond 100vh when it is not. On the right, the -webkit-fill-available<\/code> property is being used rather than viewport units to fix the problem. <\/figcaption><\/figure>\n\n\n\n

And a solution of sorts:<\/p>\n\n\n\n

body {\n  min-height: 100vh;\n  min-height: -webkit-fill-available;\n}\nhtml {\n  height: -webkit-fill-available;\n}<\/code><\/pre>\n\n\n\n
The above was updated to make sure the html<\/code> element was being used, as we were told<\/a> Chrome is updating the behavior to match Firefox’s implementation. <\/p>\n\n\n\n
Does this really work?<\/strong> […] I\u2019ve had no problems with any of the tests I\u2019ve run and I\u2019m using this method in production right now. But I did receive a number of responses to my tweet pointing to other possible problems with using this (the effects of rotating devices, Chrome not completely ignoring the property, etc.)<\/p><\/blockquote>\n\n\n\n
It would be better to get some real cross-browser solution for this someday, but I don’t see any issues using this as an improvement. It’s weird to use a vendor-prefixed property as a progressive enhancement, but hey, the world is weird.<\/p>\n","protected":false},"excerpt":{"rendered":"
A surprisingly common response when asking people about things they’d fix about anything in CSS, is to improve the handling of viewport units. One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t […]<\/p>\n","protected":false},"author":3,"featured_media":311181,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/webkit-viewport-units.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":297902,"url":"https:\/\/css-tricks.com\/some-things-you-oughta-know-when-working-with-viewport-units\/","url_meta":{"origin":311173,"position":0},"title":"Some Things You Oughta Know When Working with Viewport Units","date":"November 6, 2019","format":false,"excerpt":"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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/boundaries.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335485,"url":"https:\/\/css-tricks.com\/weekly-platform-news-reduced-motion-cors-whitehouse-gov-popups-and-100vw\/","url_meta":{"origin":311173,"position":1},"title":"Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw","date":"February 26, 2021","format":false,"excerpt":"In this week's roundup, we highlight a proposal for a new  element, check the use of prefers-reduced-motion on award-winning sites, learn how to opt into cross-origin isolation, see how WhiteHouse.gov approaches accessibility, and warn the dangers of 100vh. Let's get into the news! The new HTML  element is\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/wpn-20210226.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350486,"url":"https:\/\/css-tricks.com\/scrollbar-reflowing\/","url_meta":{"origin":311173,"position":2},"title":"Scrollbar Reflowing","date":"August 24, 2021","format":false,"excerpt":"This is a bit of advice for developers on Macs I've heard quite a few times, and I'll echo it: go into System Preferences > General > Show scroll bars and set to always. This isn't about you, it's about the web. See, the problem is that without this setting\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/scrollbar-progress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":286705,"url":"https:\/\/css-tricks.com\/the-inside-problem\/","url_meta":{"origin":311173,"position":3},"title":"The “Inside” Problem","date":"May 20, 2019","format":false,"excerpt":"So, you're working on a design. You need a full-width container element because the design has a background-color that goes from edge-to-edge horizontally. But the content inside doesn\u2019t necessarily need to be edge-to-edge. You want to: Limit the width (for large screens) Pad the edges Center the content It's \"the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":190938,"url":"https:\/\/css-tricks.com\/elegant-fix-jumping-scrollbar-issue\/","url_meta":{"origin":311173,"position":4},"title":"More Elegant Fix for Jumping Scrollbar Issue","date":"December 16, 2014","format":false,"excerpt":"If you move from one page of a site without a scrollbar to another with a scrollbar, you'll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar. A classic fix was html { overflow-y: scroll; } to force the scrollbar all the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":321421,"url":"https:\/\/css-tricks.com\/linearly-scale-font-size-with-css-clamp-based-on-the-viewport\/","url_meta":{"origin":311173,"position":5},"title":"Linearly Scale font-size with CSS clamp() Based on the Viewport","date":"September 25, 2020","format":false,"excerpt":"Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc(). Here, we\u2019re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport\u2019s width increases, with the intent of making\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/clamp-website.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/webkit-viewport-units.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/311173"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=311173"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/311173\/revisions"}],"predecessor-version":[{"id":311287,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/311173\/revisions\/311287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/311181"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=311173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=311173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=311173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}