1

CSS min-height: 100vh is bigger than the viewport on Android Chrome. It is working correctly on desktop Chrome.

The purpose is to put the footer at the viewport bottom for small content in the center.

On android, the footer is not visible and need scroll up to see it.

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header,
.footer {
  flex: 0;
}

.center {
  flex: 1;
}
<body>
  <div class="flex-container">
    <div class="header">top </div>
    <div class="center">center </div>
    <div class="footer">bottom </div>
  </div>
</body>
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
eastwater
  • 4,624
  • 9
  • 49
  • 118
  • Does this answer your question? [CSS3 100vh not constant in mobile browser](https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser) – Arturo Balbuena May 31 '22 at 04:49
  • it is different. The post says: the viewport size increases when sliding up, not the case here. – eastwater May 31 '22 at 04:56
  • Try `html, body { height: 100% }` and `min-height: 100%` on your `.flex-container` – Zach Jensz Jun 01 '22 at 01:20

0 Answers0