Posted on Oct 23 Well, this text comes from someone who's just discovered something and wants to tell the whole world about it. Up until a few hours ago, I didn't know there were other Viewport units besides vh/vw. how did I notice that?? By facing responsiveness issues and searching for solutions. I had implemented a modal that needed to take up 100% of the page height. So '100vh' worked pretty well... on desktop. The real problem emerged when I tested it on a mobile device. Below, I explain the problem and how I solved it.In this article, I'll try to discuss the 'new' CSS viewport units: svh, lvh, and dvh. But first, let's understand a few basics before we delve deeper.In a nutshell, the viewport is the visible area of a web page on a device. The size of the viewport varies according to the device, the browser, and can even be changed by the user if they resize the browser window."VH" was introduced in CSS module 3 and is a relative CSS unit. It allows webpage elements to be sized based on the screen size, creating a responsive layout. Thus, 'vh' represents a percentage of the viewport height.1vh=1% of the viewport height.While 'vh' brought many improvements, especially for desktops, mobile devices posed some challenges. Some browsers have a navigation bar that occupies screen space. This bar usually overlays the webpage content and can dynamically expand or retract based on the direction the user scrolls. Therefore, 'vh' can behave unexpectedly on some devices.Because of these problems, the community discussed and came up with some solutions:'svh' is defined considering the viewport size when the navigation bar (or other browser items) is expanded. So when the browser occupies as much space as possible, the page content will be the smallest.In the example below, '100svh' will occupy the screen space considering the expanded navigation bar, without content "hanging" beneath the bar.When to use:When you want to ensure content won't be obscured by the browser's UI.When to avoid:If the browser's UI is retracted, as there might be extra white space.Conversely, 'lvh' is the opposite of 'svh'. It's defined considering the viewport size when the navigation bar or other browser items are retracted. Essentially, 'lvh' behaves similarly to 'vh'.When to use:To maximize content space when the browser's UI is retracted.When to avoid:If the browser's UI is expanded, as content might be obscured.As the name suggests, Dynamic Viewport is dynamic. It automatically adjusts the content size based on the browser's UI, whether expanded or retracted. Although this might seem perfect, one must be cautious: using 'dvh' could cause content to resize when the user scrolls, which could be distracting and degrade user experience, not to mention potential performance costs.When to use:When you want dynamic height adjustments as the browser's UI changes.When to avoid:If dynamic resizing could distract the user or negatively impact user experience.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Lucian Tartea - Sep 23 Grace Valerie - Sep 24 Mysterio - Sep 21 Camilo Micheletto - Sep 23 Once suspended, leomunizq will not be able to comment or publish posts until their suspension is removed. Once unsuspended, leomunizq will be able to comment and publish posts again. Once unpublished, all posts by leomunizq will become hidden and only accessible to themselves. If leomunizq is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Leonardo Muniz. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag leomunizq: leomunizq consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging leomunizq will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.