| |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| !Page cropped by bottom Safari chrome | !Page cropped by bottom Safari chrome |

More on this issue
here.

The solution

Div100vh React component is the default export:

``jsx
import Div100vh from 'react-div-100vh'

const MyFullHeightComponent = () => (

Look ma, no crop!

)
`

For more advanced use cases (for instance, if you need 50% of the real height),
there is a named export use100vh. This React hook provides an accurate
vertical height in pixels. The return type is a number in a browser and null
in Node environment. You may need to check if it's not null if you're doing
SSR, otherwise, manipulate the value as you wish and concatenate the result with
px:

`jsx
import { use100vh } from 'react-div-100vh'

const MyHalfHeightExampleComponent = ({ children }) => {
const height = use100vh()
const halfHeight = height ? height / 2 : '50vh'
return


}
`

Under the hood use100vh uses measureHeight function which is exported as
well, so feel free to use it, even without React. Currently it returns
document.documentElement?.clientHeight || window.innerHeight if executed in a
browser or null` if on a server.

Testing

This component is tested with title="BrowserStack" alt="BrowserStack Logo" height="40"
src="https://raw.githubusercontent.com/mvasin/react-div-100vh/master/images/browser-stack.svg">.