how to fix an element in bottom while the keyboard is open

Question

I have a page that has an element at the bottom of the page. I use position absolute to fix it to bottom. When I open the keyboard he element goes to middle of the page.

It's a normal situation

I want this

And this is my problem

.container{
    position:relative;
    height:100%;
}
.myclass{
    position : absolute;
    bottom:0;
    margin:auto;
    display:flex;
    align-items:center;
}

Answer 1

Using

display:flex;
flex-direction: column;

in your main container

and add your .box element margin-top: auto; will fix your problem i guess.

Press the button

const container = document.querySelector('.container');

const addButton = document.querySelector('button');


addButton.addEventListener('click', () => {
    const newDiv = document.createElement('div');
    newDiv.style.height = "10rem";
    newDiv.style.width = "100%";
    newDiv.style.backgroundColor = "red";
    container.appendChild(newDiv);
})

*, 
*::before,
*::after{
    margin: 0;
}


body{
    min-height: 100vh;
}


.container{
    display: flex;
    flex-direction: column;
    text-align: center;
    width:375px;
    height: 100vh;
    margin: 0 auto;
    background-color: bisque;
}

.box{
    height: 5rem;
    width: 100%;
    background-color: blue;
    margin-top: auto;
}

button{
    position: absolute;
    width: 5rem;
    height: 5rem;
    top: 5rem;
    right: 5rem;
}

<div class="container">
      <h1>Enter text</h1>
      <div class="box"></div>
</div>
<button>Add new box</button>