css - coloca div en la parte inferior del div contenedor

118

¿Cómo puedo colocar un div en la parte inferior del div que lo contiene?

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

Este código coloca el texto "dentro" al final de la página.

css position nagy.zsolt.hun
fuente
6
.Necesidades externasposition: relative;
Imperativo
relativo, sí, y luego no sabe qué tan grande debe ser para contener el contenido de child-div, desafortunadamente, así que a menos que sea un valor estático, volvamos a la pregunta original. Cómo colocar un div en la parte inferior de otro div (implícito: "sin romper todo").
JosephK

Respuestas:

136 
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

Necesita ser

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

El posicionamiento absoluto busca el padre relativamente posicionado más cercano dentro del DOM, si uno no está definido, usará el cuerpo.

Karl
fuente
Gracias. ¿Puedes explicar porque?
nagy.zsolt.hun
37
absolutebusca el relativepadre más cercano . De forma predeterminada, es el bodyde document. Entonces, si ningún objeto DOM principal ( .outside) tiene la propiedad de ser relativesu .inside, irá al final de la etiqueta del cuerpo.
6
" Posicionamiento absoluto miradas de los padres en posición relativa más cercana dentro del DOM, si uno no está definido se utilizará el cuerpo. " Usted acaba de explicar por lo tanto por mí! Ahora realmente empiezo a entender CSS. ¡GRACIAS!
Simon Forsberg
Absolute en realidad busca el ancestro posicionado no predeterminado (= estático) más cercano, que a menudo está posicionado relativamente. Tampoco tiene que ser un padre directo, pero puede ser, por ejemplo, un abuelo.
mzwaal
1
Esto depende de alturas constantes, lo cual es MUY MALO. Un simple cambio de fuente, tamaño de fuente, relleno, márgenes y Dios sabe qué más exige experimentación para adivinar la nueva altura.
Anderson
73

Asignar position:relativea .outside, y luego position:absolute; bottom:0;a su .inside.

Al igual que:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}
dsgriffin
fuente
esta podría ser la base de un pie de página pegajoso, ¿no?
cade galt
1
No puedo usar la posición: absoluta; para el segundo div. esa es mi restricción, ¿me pueden dar otras opciones?
Piyush Dholariya
20

Agregar position: relativea .outside. ( https://developer.mozilla.org/en-US/docs/CSS/position )

Los elementos que se colocan relativamente todavía se consideran en el flujo normal de elementos en el documento. Por el contrario, un elemento que se posiciona absolutamente se saca del flujo y, por lo tanto, no ocupa espacio al colocar otros elementos. El elemento absolutamente posicionado se posiciona con relación al antepasado posicionado más cercano. Si no existe un antepasado posicionado, se utiliza el contenedor inicial.

El "contenedor inicial" sería <body>, pero agregar lo anterior hace que se .outsideposicione.

Pastillas de explosión
fuente