Div conteniendo otra Div que quede situada en su parte inferior.

MACvsWINDOWS · #1 (**permalink**) 06/02/2011, 09:44

Hola, quiero hacer que una Div contenga otra Div y que ésta última se sitúe en la parte inferior. Por defecto me aparece la Div de dentro arriba del todo, y quiero que esté abajo.

Saludos!

sanxuan · #2 (**permalink**) 06/02/2011, 12:51

Al div exterior le puedes dar posición relativa (position:relative) y al interior posición absoluta situándolo sobre el borde inferior (position:absolute; bottom:0;)
Esto sólo se notará si el div exterior tiene un alto mayor que el div interior.
Debes tener en cuenta que al usar una posición absoluta el div interior se colocará sobre cualquier otra cosa que haya en el div exterior. Para evitar este solapamiento, puede incluirse otro div con un margen inferior igual a la altura del que se situa en el borde inferior.

<style type="txt/css">
div#exterior{
position:relative;
min-height:500px;
}
div#contenido{
margin-bottom:300px;
}
div#pie{
position:absolute;
bottom:0;
height:300px;
}
</style>
<body>
<div id="exterior">
<div id="contenido">Algo de contenido"</div>
<div id="pie">Contenido del pie</div>
</div>
Las medidas que doy son figuradas, cámbialas por las que necesites.

MACvsWINDOWS · #3 (**permalink**) 06/02/2011, 13:02

Cita:

Iniciado por sanxuan

Al div exterior le puedes dar posición relativa (position:relative) y al interior posición absoluta situándolo sobre el borde inferior (position:absolute; bottom:0;)
Esto sólo se notará si el div exterior tiene un alto mayor que el div interior.
Debes tener en cuenta que al usar una posición absoluta el div interior se colocará sobre cualquier otra cosa que haya en el div exterior. Para evitar este solapamiento, puede incluirse otro div con un margen inferior igual a la altura del que se situa en el borde inferior.

<style type="txt/css">
div#exterior{
position:relative;
min-height:500px;
}
div#contenido{
margin-bottom:300px;
}
div#pie{
position:absolute;
bottom:0;
height:300px;
}
</style>
<body>
<div id="exterior">
<div id="contenido">Algo de contenido"</div>
<div id="pie">Contenido del pie</div>
</div>
Las medidas que doy son figuradas, cámbialas por las que necesites.

Hola sanxuan, gracias por la repuesta, voy a probar a ver qué tal ;)