1

I have a side menu layout bug on mobile chrome, which is similar as the side menu examples of https://www.w3schools.com/howto/howto_js_sidenav.asp.

If you access the link above on mobile devices' chrome and open any one of the menu examples (screenshot 1). Then when you scroll up to hide chrome's address bar, there will be a blank gap on the bottom of the menu before you stop scrolling(screenshot 2)

The only way I can figure out is to add height: 100%; overflow: auto to html and body. However this causes some other issues for me. Is there any other way to fix it?

enter image description here

enter image description here

vincentf
  • 1,419
  • 2
  • 20
  • 36

2 Answers2

0

height: 100vh and posotion: fixed works for me in most cases:

:root {
  --nav-width: 300px;
}
* {
  box-sizing: border-box;
}
html, body {
  margin:0;
}
div {
  padding: 15px;
}
.nav {
  background-color: goldenrod;
  height: 100vh;
  position: fixed;
  width: var(--nav-width);
}
.content {
  margin-left: var(--nav-width);
  height: 3000px;
  background-color: lightgreen;
}
<div class="nav">
  <h3>I'm nav</h3>
</div>
<div class="content">
  <h3>I'm content</h3>
</div>
fen1x
  • 5,616
  • 6
  • 28
  • 39
0

From this answer and after testing it on iPad, you need the following changes to your .sidenav

.sidenav {
    -webkit-transform: translateZ(0);
    height: 110%; 
...
}

Demo

Miro
  • 8,402
  • 3
  • 34
  • 72