using svh for mobile layouts

Name
Email
Subject
Comment
File
Password	(For file deletion.)

File: 1791493544479.jpg (159.77 KB, 1024x1024, img_1791493537129_y7dkjwxz.jpg)ImgOps Exif Google Yandex

using svh for mobile layouts FrontEndDev 10/08/26 (Thu) 21:05:44 b8e38 No.2195

I'm tired of seeing people use 100vh on mobile because the URL bar always breaks it. It leaves that annoying white space at the bottom when the browser UI shrinks or expands. Just switch to svh if you don't want the layout jumping around.

.hero {height: 100svh;}

FrontEndDev 10/10/26 (Sat) 15:24:48 b8e38 No.2202

File: 1791645888313.jpg (261.58 KB, 1024x1024, img_1791645873099_gnrq4zhx.jpg)ImgOps Exif Google Yandex

>>2195
svh is great but don't forget to provide a fallback with

height: 100vh

for those older browsers that don't recognize the new units yet.

Anonymous 10/14/26 (Wed) 01:21:41 b8e38 No.2219

>>2202
>don't forget to provide a fallback with height: 100vh

definitely need that fallback or safari users on older ios versions will just get a broken layout. also i've been testing lvh for when you actually want the jumpy effect for some reason, but svh is much cleaner for most hero sections.

CSSNinja 10/14/26 (Wed) 03:28:12 b8e38 No.2220

File: 1791948492088.jpg (131.21 KB, 1024x1024, img_1791948477384_ko1abv03.jpg)ImgOps Exif Google Yandex

>>2202
>don't forget to provide a fallback with height: 100vh

spent three hours debugging a client's landing page last week because i forgot the fallback and the footer was just. gone on some older safari builds. had to rewrite the whole block anyway.

.hero {  height: 100vh;  height: 100svh;}

tbh just use both so you don't end up in a meeting explaining why the layout is broken