0
187
VistasCómo cambiar dinámicamente la posición: propiedad en CSS (o JavaScript) cuando el contenido está cerca de otro contenido
Bien, tengo algunos elementos de la lista en la página dentro de una ul, y tengo un pie de página colocado en CSS.
Cuando los elementos de la lista llegan casi al final de la página, el pie de página se superpone con los elementos de la lista. Esto es esperado pero no deseado. Lo que quiero es que el pie de página se convierta en posición: relativo sin valores de propiedad superiores e izquierdos establecidos para que los elementos de la lista sigan creciendo y el pie de página se siga empujando hacia abajo en la página.
Ver la imagen adjunta: 
¿Cómo puedo conseguir esto?
<section> <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> </ul> </section> <footer> <p>Hello.</p> </footer> footer { position: sticky; bottom: 0; }Preferiría hacer esto sin JavaScript, pero si debo recurrir a esto...
2 Respuestas
Responde la pregunta0
Te acercas a este tema de manera demasiado complicada. Olvídese de la position y piense en cómo puede empujar un elemento hasta el fondo dentro de un contenedor con una min-height: 100vh
Simplemente use min-height: 100vh en el cuerpo (no olvide restablecer el margen predeterminado). De esa forma, el cuerpo como elemento envolvente siempre llenará al menos la altura de la ventana gráfica, incluso si no hay suficiente contenido.
Luego, aprovecha Flexbox mientras usa flex-direction: column para mantener el comportamiento de nivel de bloque predeterminado.
dentro Flexbox puedes usar margin: auto para consumir todo el espacio disponible. Si aplica margin-top: auto al pie de página, lo empujará hasta el final si no hay suficiente contenido para llenar la ventana gráfica:
//script only for visualization purpose var btn = document.querySelector('button'), ul = document.querySelector('ul'); btn.addEventListener('click', function() { ul.insertAdjacentHTML('beforeend', '<li>Test</li>'); }) body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; } footer { margin-top: auto; } <section> <button>Add another List-Item</button> <ul> <li>Test</li> <li>Test</li> </ul> </section> <footer> <p>Hello.</p> </footer>0
Yo usaría la regla flex-grow . Consulte https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
El elemento se expandirá tanto como pueda para llenar la ventana gráfica. Sin embargo, debe estar en un contenedor flexible, lo que significa que el elemento principal debe estar en pantalla: flex. Agregué una dirección flexible para mantener el diseño según sea necesario.
html, body { height: 100%; } body { display: flex; flex-direction: column; } header { border: 2px solid khaki; } section { flex-grow: 1; } footer { border: 2px solid paleturquoise; } <body> <header> <p>Header</p> </header> <section> <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> </ul> </section> <footer> <p>Footer</p> </footer> </body>