How to prevent my page from moving up when I open a keyboard on a phone?

I have a login and register page in my react app, and I made responsive styles for them.

It looks like this:

Css style:

.login{
    @include flex(unset, unset);
    justify-content: space-between;
    width:100%;
    height: 100vh;
    background-color: $main-color;

    @include media(tablet,mobile){
        min-height: auto;
        flex-direction: column;
        justify-content: unset;
    }
}

And the problem is: when I start typing and the keyboard appears, everything goes up and there's just an empty space below:

I tried changing min-height to auto so the login div wouldn't be like that, but it didn't really help.

Edit: also navbar styles:

.nav_bar{
    height:100vh;
    width: 75px;
    background-color:#2e2e2e;
    z-index: 9;

    @include media(tablet, mobile){
        position: fixed;
        bottom: 0;
        height: 65px;
        width: 100%;
    }
}