Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-div-100vh with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactDiv100vh = require("react-div-100vh")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-div-100vh v0.3.8

A React component that aims to solve '100vh' issue in mobile browsers

Div100vh React component

CircleCI npm version

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

The problem

At the top of the page, mobile browsers cover bottom of 100vh page with "browser chrome" (that's the name for browser navigation/context buttons, don't confuse with the browser from Google), effectively cropping it. If you have something important at the bottom of your splash screen, chances are it will not be visible/available until user scrolls.

More on this issue here.

The solution

iOS screenshots

<div style={{height: '100vh'}}><Div100vh>
Page cropped by bottom Safari chromePage cropped by bottom Safari chrome

The demo

Browse on your phone!


  • Install it: npm install --save react-div-100vh or yarn add react-div-100vh
  • Import the component and wrap your stuff with <Div100vh> as you would with a normal <div style={{height: '100vh'}}>, but this time mobile browsers should display the whole page on load:

The default behavior

import Div100vh from 'react-div-100vh'

const MyFullscreenComponent = () => (
    <marquee>Your stuff goes here</marquee>

Using rvh units

If you want to set min-height (or any other property) instead, you can use made up rvh ("real viewport height") units in values of an object passed to style prop. Div100vh will find any style declarations with this unit and calculate the value as a percentage of window.innerHeight:

  <Div100vh style={{minHeight: '50rvh'}}>
    <marquee>This is inside a div that takes at least 50% of viewport height.</marquee>

If you don't specify style prop, it works as if you specified {height: '100rvh'}; <Div100vh> is equivalent to <Div100vh style={{height: '100rvh'}}>.

If you do pass anything to the style prop, no implicit style is applied. You can do something like:

  style={{maxHeight: '70rvh', color: 'blue'}}
  onClick={() => console.log('hi')}
  <p>my content here</p>

The rest of the props are passed unchanged to the underlying div that Div100vh renders.

Rendering non-<div> elements

You can also pass an as prop to render other elements than <div>s - for example, <main>, <section>, <footer>, et cetera.

<Div100vh as="main">
  <p>Some main content</p>

❗ Keep in mind that this works best with block-level elements, as inline-level elements don't respond to the CSS height property.

Additional considerations

Please note that most likely you will want to set body {margin: 0} css, unless you use some css reset that does it for you.


This component is tested with Jest and BrowserStack Logo

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free