search

dwarvesf / til

Today I Learned. Our knowledge hub. List out what we've learned everyday, organized.
29 stars 1 forks source link

"True" full height hero on mobile #27

Open huygn opened 6 years ago

huygn commented 6 years ago

window.innerHeight is your best bet.

Below method work on both android/chrome and ios/safari. One caveat is that you will see a flash from 100vh to window.innerHeight (at least on https://dautu.io) because the initial html is static-generated, and window is only avaible on client side.

componentDidMount() {
  this.container.style.minHeight = `${window.innerHeight}px`
}

<div ref={this.setRef} className="min-h-screen">...</div>