Repository files navigation

This is a workaround for iOS Safari and other mobile browsers.

In mobile browsers, thereal height of the viewport is dynamic, as browser"chrome" (panels) slide away on scrolling. The browser developers faced twochoices: either to reflow the page as the pixel value of avh changes, orignore the fact that the browser panel covers part of the screen.

The browser panels are supposed to slide away smoothly, and because the layoutreflow during scrolling will not look smooth, the browser developers went forthe second option.

It may work for the most of use cases, but if you're looking for an app-likefull-screen experience, or want to make sure that the call to action button atthe bottom of your splash screen isn't covered, you may need to know the fairvalue of avh.

<div style={{height: '100vh'}}>	<Div100vh>

More on this issuehere.

Div100vh React component is the default export:

importDiv100vhfrom'react-div-100vh'constMyFullHeightComponent=()=>(<Div100vh><marquee>Look ma, no crop!</marquee></Div100vh>)

For more advanced use cases (for instance, if you need 50% of the real height),there is a named exportuse100vh. This React hook provides an accuratevertical height in pixels. The return type is anumber in a browser andnullin Node environment. You may need to check if it's notnull if you're doingSSR, otherwise, manipulate the value as you wish and concatenate the result withpx:

import{use100vh}from'react-div-100vh'constMyHalfHeightExampleComponent=({ children})=>{constheight=use100vh()consthalfHeight=height ?height/2 :'50vh'return<divstyle={{height:halfHeight}}>{children}</div>}

Under the hooduse100vh usesmeasureHeight function which is exported aswell, so feel free to use it, even without React. Currently it returnswindow.innerHeight in a browser andnull in Node.

This component is tested with.