100vh not working on mobile

Add Answer | View In TPC Matrix

Technical Problem Cluster First Answered On November 14, 2022 Popularity 6/10 Helpfulness 8/10

Contributions From The Grepper Developer Community

Code Examples

100vh problem on mobile phone and tab

TPC Matrix View Full Screen

100vh problem on mobile phone and tab

Comment

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

Popularity 5/10 Helpfulness 8/10 Language css

Source: stackoverflow.com

Link to this answer
Share Copy Link

Contributed on Nov 14 2022

Motionless Mockingbird

3 Answers Avg Quality 9/10

100vh problem on mobile phone and tab

Comment

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

Popularity 4/10 Helpfulness 7/10 Language javascript

Source: stackoverflow.com

Link to this answer
Share Copy Link

Contributed on Nov 14 2022

Motionless Mockingbird

3 Answers Avg Quality 9/10

100vh not working on mobile

Contents

Code Examples

Related Problems

TPC Matrix View Full Screen

100vh problem on mobile phone and tab

100vh problem on mobile phone and tab

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.