¿Cómo puedo colocar mi div en el fondo de su contenedor?
Dado el siguiente HTML:
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>Me gustaría #copyrightceñirme al final de #container. ¿Puedo lograr esto sin utilizar el posicionamiento absoluto?
Probablemente no.
Asigne position:relativea #containery luego position:absolute; bottom:0;a #copyright.
#container {
position: relative;
}
#copyright {
position: absolute;
bottom: 0;
}<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
En realidad, la respuesta aceptada por @User solo funcionará si la ventana es alta y el contenido es corto. Pero si el contenido es alto y la ventana es corta, pondrá la información de derechos de autor sobre el contenido de la página y luego, al desplazarse hacia abajo para ver el contenido, aparecerá un aviso de derechos de autor flotante. Eso hace que esta solución sea inútil para la mayoría de las páginas (como esta página, en realidad).
La forma más común de hacer esto es el enfoque demostrado del "pie de página adhesivo CSS", o una variación ligeramente más delgada. Este enfoque funciona muy bien, SI tiene un pie de página de altura fija.
Si necesita un pie de página de altura variable que aparecerá en la parte inferior de la ventana si el contenido es demasiado corto y en la parte inferior del contenido si la ventana es demasiado corta, ¿qué debe hacer?
Trágate tu orgullo y usa una mesa.
Por ejemplo:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#container {
height: 100%;
border-collapse: collapse;
}<!DOCTYPE html>
<html>
<body>
<table id="container">
<tr>
<td valign="top">
<div id="main">Lorem ipsum, etc.</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div id="footer">Copyright some evil company...</div>
</td>
</tr>
</table>
</body>
</html>Pruébalo. Esto funcionará para cualquier tamaño de ventana, para cualquier cantidad de contenido, para cualquier tamaño de pie de página, en todos los navegadores... incluso IE6.
Si te da vergüenza pensar en utilizar una tabla para el diseño, tómate un segundo para preguntarte por qué. Se suponía que CSS haría nuestras vidas más fáciles, y en general lo ha hecho, pero el hecho es que incluso después de todos estos años, sigue siendo un desastre roto y contrario a la intuición. No puede resolver todos los problemas. Está incompleto.
Las tablas no son geniales, pero al menos por ahora, a veces son la mejor manera de resolver un problema de diseño.
¡El enfoque de caja flexible!
En los navegadores compatibles , puede utilizar lo siguiente:
Ejemplo aquí
.parent {
display: flex;
flex-direction: column;
}
.child {
margin-top: auto;
}
Mostrar fragmento de código
La solución anterior es probablemente más flexible; sin embargo, aquí hay una solución alternativa:
Ejemplo aquí
.parent {
display: flex;
}
.child {
align-self: flex-end;
}
Mostrar fragmento de código
Como nota al margen, es posible que desee agregar prefijos de proveedores para obtener soporte adicional.
