css - posição div na parte inferior da div que contém

118

Como posso posicionar uma div na parte inferior da div que o contém?

<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 o texto "dentro" na parte inferior da página.

css position nagy.zsolt.hun
fonte
6
.necessidades externasposition: relative;
Imperativo
relativo, sim, e então ele não sabe quão grande precisa ser para conter o conteúdo div-filho, infelizmente, então, a menos que seja um valor estático, de volta à pergunta original. Como colocar um div na parte inferior de outro div (implícito: "sem quebrar tudo").
JosephK de

Respostas:

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

Precisa ser

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

O posicionamento absoluto procura o pai relativamente posicionado mais próximo dentro do DOM; se não houver um definido, ele usará o corpo.

Karl
fonte
Obrigado. Você pode explicar por quê?
nagy.zsolt.hun
37
absoluteprocura o relativepai mais próximo . Por padrão, é o bodydo document. Portanto, se nenhum objeto DOM pai ( .outside) tiver a propriedade de ser relativeseu, .insideele irá para a parte inferior da tag do corpo.
6
" Absolute posicionando olhares para o mais próximo dos pais relativamente posicionado dentro do DOM, se não for definido ele irá usar o corpo. " Você acabou de explicar de modo muito para mim! Agora eu realmente começo a entender CSS. OBRIGADO!
Simon Forsberg
Na verdade, o Absolute procura o ancestral posicionado não padrão (= estático) mais próximo, que geralmente está relativamente posicionado. Ele também não precisa ser um pai direto, mas pode, por exemplo, ser um avô.
mzwaal
1
Isso depende de alturas constantes, o que é MUITO RUIM. Uma simples mudança de fonte, tamanho da fonte, preenchimento, margens e sabe Deus o que mais exige experimentação para adivinhar a nova altura.
Anderson
73

Atribua position:relativea .outsidee depois position:absolute; bottom:0;ao seu .inside.

Igual a:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}
dsgriffin
fonte
esta poderia ser a base para um rodapé pegajoso, não é?
cade galt
1
Não posso usar a posição: absoluta; para o segundo div. essa é a minha restrição, você pode me dar outras opções?
Piyush Dholariya de
20

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

Os elementos posicionados relativamente ainda são considerados como estando no fluxo normal de elementos no documento. Em contraste, um elemento que está posicionado absolutamente é retirado do fluxo e, portanto, não ocupa espaço ao colocar outros elementos. O elemento posicionado absolutamente é posicionado em relação ao ancestral posicionado mais próximo. Se um ancestral posicionado não existe, o recipiente inicial é usado.

O "recipiente inicial" seria <body>, mas adicionar o acima faz com que seja .outsideposicionado.

Pílulas Explosivas
fonte