Don't use 100vh for mobile responsive

Exploring the new tools and techniques on frontend development. Loves to meet up with new people and participate in the community. I do interesting stuff on codepen https://codepen.io/nirazanbasnet
Search for a command to run...

Exploring the new tools and techniques on frontend development. Loves to meet up with new people and participate in the community. I do interesting stuff on codepen https://codepen.io/nirazanbasnet
Very insightful.
Thank you :)
A few months ago, my product manager dropped something in the team channel. "We are adding an AI agent to the platform next quarter. It will handle follow-ups automatically." Just like that. One messa

f you’re diving into React, you’ve likely come across the useRef hook. But what exactly is useRef(), and how can it make your life easier? In this post we’ll cover what useRef is, walk through five

A bug that only happens for some users, that you can never reproduce, that isn't in your code. Welcome to the React + browser-translation crash — what causes it, why it's so sneaky, and the battle-tested one-file fix.

Upgrading a core production database is usually the stuff of dev nightmares. It often involves maintenance windows, scheduled downtime, and the looming fear of a botched migration. But what if you cou

We are moving into products that adapt, predict and react with real context. Designing only interfaces is not enough anymore. We are designing experiences that understand the user. Designers and digital agencies are now challenged to move beyond trad...

Engineering at JoBins
167 posts
Welcome to Engineering at JoBins — where we share the stories, insights, and lessons from building a world-class hiring platform. From system design and scalability to developer tools and team culture, our engineers write about the real challenges we solve every day. Whether you're a curious developer or a fellow builder, we hope our experiences inspire and inform your own engineering journey.
Generally, we use height:100vh for fullscreen layout which is an easy hack and convenient way to get better design.
.content {
height: 100vh;
}
But when we test our design on an actual device, we encounter several issues:
Mostly Chrome and Firefox browsers on mobile have got a UI (address bar etc) at the top.
On Safari it gets more tricky address bar is at the bottom.
Different browsers have differently sized viewports
Mobile devices calc browser viewport as (top bar + document + bottom bar) = 100vh
The whole document is filled to the page using 100vh

Scrollbar issues have been detected. Bad user flow and difficulty to navigate the content.
Note: I have also tested these issues on safari which makes more bad user flow
Setting the height of the page (using javascript) with the window.innerheight property.
const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, documentHeight)
documentHeight()
:root {
--doc-height: 100%;
}
html,
body {
padding: 0;
margin: 0;
height: 100vh; /* fallback for Js load */
height: var(--doc-height);
}
Here, the documentHeight function sets new style property var('--doc-height') and includes the current window height.

Note: There is no vertical extra scrollbar appearing now also no issues on Safari too. The bottom address bar of safari is always on the bottom which makes good user flow to the website
Conclusion 👏👏 By coming this far I hope you can solve the mobile devices' viewport issues. So, I suggest you give your a try on your project and enjoy it!
Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.
Till then, Keep on Hacking, Cheers