0
322
Viewscómo arreglar un elemento en la parte inferior mientras el teclado está abierto
Tengo una página que tiene un elemento en la parte inferior de la página. Uso la posición absolute para fijarlo al fondo. Cuando abro el teclado, el elemento va a la mitad de la página.
es una situación normal
quiero esto
Y este es mi problema 
.container{ position:relative; height:100%; } .myclass{ position : absolute; bottom:0; margin:auto; display:flex; align-items:center; }
·
Santiago Gelvez
1 answers
Answer question0
Usando
display:flex; flex-direction: column;en su contenedor principal
y agregue su elemento .box margin-top: auto; solucionará tu problema, supongo.
presiona el botón
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>
·
Santiago Gelvez
Report
Answer question