visible-height-css

Its like css' vh, but working. vh stands for 'viewport height' when most often we care about the visible height. Things like menu bars in mobile browsers dont affect vh while we often want to take them into consideration. See the demo (on a mobile browser with a menu bar) to see the difference.

install

npm i visible-height-css

<script src="https://cdn.jsdelivr.net/npm/visible-height-css/web"></script>

usage

This will set a css var named '--vih'. If no string is passed, defaults to '--visible-height'.

import { setVisibleHeight } from 'visible-height-css'
 
setVisibleHeight('vih')

Then use it in css

.my-super-class {
    height: calc(100 * var(--vih, /*fallback*/ 1vh));
}