{"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 […]<\/p>\n","protected":false},"author":3,"featured_media":311181,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"rank_math_lock_modified_date":false,"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,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[],"class_list":["post-311173","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links"],"jetpack_publicize_connections":[],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"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":[],"_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}]}}