None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75)
to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div
after the form div
in the bottom (to stick to the window bottom instead of my form) and made it transparent
. so it worked! (I have to mention that I am writing react code)
this is my div
:
<div className="modal-padding"/>
and this is my styling for this div
:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div
and one after that.
Be careful. I tested giving a width: 100vw
and height: 10vh
to the div
but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.