css - posiziona div in fondo a contenere div

118

Come posso posizionare un div in fondo al div che 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>

Questo codice inserisce il testo "dentro" in fondo alla pagina.

css position

— nagy.zsolt.hun
fonte

.outside needsposition: relative;

— Imperativo

relativo, sì, e quindi non sa quanto deve essere grande per contenere il contenuto div figlio, sfortunatamente, quindi a meno che non sia un valore statico, torna alla domanda originale. Come posizionare un div in fondo a un altro div (implicito: "senza rompere tutto").

— JosephK

Risposte:

136

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

Deve essere

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

Il posizionamento assoluto cerca il genitore posizionato relativamente più vicino all'interno del DOM, se uno non è definito utilizzerà il corpo.

— Karl
fonte

Grazie. Puoi spiegare perché?

— nagy.zsolt.hun

absolutecerca il relativegenitore più vicino . Per impostazione predefinita è bodyil file document. Quindi se nessun oggetto DOM genitore ( .outside) ha la proprietà di essere il relativetuo .inside, andrai in fondo al tag body.

" Il posizionamento assoluto cerca il genitore più vicino posizionato relativamente all'interno del DOM, se uno non è definito utilizzerà il corpo. " Mi hai appena spiegato così tanto! Ora comincio davvero a capire i CSS. GRAZIE!

— Simon Forsberg

Assoluto cerca effettivamente l'antenato posizionato non predefinito (= statico) più vicino, che spesso è posizionato relativamente. Inoltre non deve essere un genitore diretto, ma può ad esempio essere un nonno.

— mzwaal

Questo dipende da altezze costanti, il che è MOLTO MALE. Un semplice cambio di carattere, dimensione del carattere, spaziatura interna, margini e dio sa cos'altro richiede la sperimentazione per indovinare la nuova altezza.

— Anderson

Assegna position:relativea .outside, quindi position:absolute; bottom:0;al tuo .inside.

Così:

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}

— dsgriffin
fonte

questa potrebbe essere la base per un piè di pagina appiccicoso, no?

— cade galt

Non posso usare la posizione: assoluta; per il secondo div. questa è la mia restrizione, potete darmi altre opzioni?

— Piyush Dholariya

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

Gli elementi che sono posizionati in modo relativo sono ancora considerati nel normale flusso di elementi nel documento. Al contrario, un elemento posizionato in modo assoluto viene tolto dal flusso e quindi non occupa spazio quando si posizionano altri elementi. L'elemento posizionato in modo assoluto è posizionato rispetto all'antenato posizionato più vicino. Se un antenato posizionato non esiste, viene utilizzato il contenitore iniziale.

Il "contenitore iniziale" sarebbe <body>, ma aggiungendo quanto sopra viene .outsideposizionato.

— Pillole di esplosione
fonte