https://github.com/khaphanspace/100vh
100vh doesn't work as you expected
https://github.com/khaphanspace/100vh
css trick
Last synced: 27 days ago
JSON representation
100vh doesn't work as you expected
- Host: GitHub
- URL: https://github.com/khaphanspace/100vh
- Owner: khaphanspace
- Created: 2020-11-04T02:31:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-10T07:04:45.000Z (over 5 years ago)
- Last Synced: 2025-06-22T07:18:16.356Z (12 months ago)
- Topics: css, trick
- Language: HTML
- Homepage: https://100vh.vercel.app/
- Size: 2.93 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Hello There!
`100vh` is `100% of the viewport height`. We often use this unit in the hero section, modal, header.. and it has a very common issue on mobile that you can see in an image below.
As you can see we have a `navigation bar` at the bottom of the browser float on our site and `100vh` does not work properly. And each browser `navigation bar` has a different height, so we do `not have a fixed value` to calculate this height.
To resolve an issue we can use a trick below:
```css
.my-element {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}
```
```js
// We listen to the resize event
window.addEventListener('resize', () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
```
Please be careful when using CSS variables, because your browser can be not supported, please check details here: https://caniuse.com/css-variables
:point_right: **Demo**: https://100vh.vercel.app/ *(Please open on mobile to see what happens)*
Hope this helps!
## Reference
- https://css-tricks.com/the-trick-to-viewport-units-on-mobile/