# viewport-height-fix
A small TypeScript utility to fix the mobile 100vh issue by setting a `--vh` CSS variable to the real viewport height.
## Installation
```sh
npm install viewport-height-fix
```
## Usage
### Vanilla JS/HTML
```html
Viewport Height Fix Test
100vh Box
```
### React
```js
// App.js or index.js
import { useEffect } from 'react';
import { initViewportHeightFix } from 'viewport-height-fix';
function App() {
useEffect(() => {
initViewportHeightFix();
}, []);
return 100vh Box
;
}
```
### Vue
```js
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { initViewportHeightFix } from 'viewport-height-fix';
initViewportHeightFix();
createApp(App).mount('#app');
```
### Angular
```ts
// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { initViewportHeightFix } from 'viewport-height-fix';
initViewportHeightFix();
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
```
### Svelte
```js
// main.js
import App from './App.svelte';
import { initViewportHeightFix } from 'viewport-height-fix';
initViewportHeightFix();
const app = new App({
target: document.body,
});
export default app;
```
---
## How It Works
This utility sets a CSS variable `--vh` to `window.innerHeight * 0.01` and updates it on resize/orientation change, debounced for performance.
Use `height: calc(var(--vh, 1vh) * 100)` in your CSS for elements that should fill the viewport height.
## Why?
On mobile browsers, `100vh` can be inaccurate due to browser UI. This utility provides a reliable value for layouts.
## License
MIT