0
<style>
body{
Height:100vh;
Width:100vw;
}
.abc{
Height:20%;
Width:100%;
Border:solid blue;
}
.def{
Height:20%;
Width:100%;
Border:solid green;
}
</style>
<body>
<div class="abc">
<input type="text">
</div>
<div class="def">
<p>Fix Me plz</p>
</div>
</body>

I want the keyboard to overlap the content, not push it up.************** When the input is made active, the keyboard pops up and pushes the content up.

Thank you.

Edit:Now know that this is caused from the viewport height being changed on Android. Still not sure on a fix.

Zero G
  • 1
  • 1
  • Are you referring to the second div overlapping the first div? If so, see this link: https://stackoverflow.com/questions/16372000/how-to-overlap-two-div-in-css – SoftwareDveloper Aug 08 '23 at 19:16
  • When on an android device, the viewport is changed to make space for the soft keyboard. I was hoping there would be a fix to this so I can carry on using vh to size my containers. – Zero G Aug 08 '23 at 20:59

0 Answers0