Genitore relativo DIV per ereditare la larghezza del figlio assoluto DIV

Question

Sto provando a posizionare un figlio DIV nella parte inferiore di un DIV padre, ma vorrei anche il contenuto del DIV figlio per aiutare a dettare le dimensioni del DIV padre . Come ho fatto adesso, il DIV bambino non influenza la larghezza/altezza del DIV genitore.

Ecco un esempio del mio codice HTML/CSS:

// codice HTML:

<div id="parent"> 
    <h3>Top Aligned Title</h3> 
    <div id="child"></div> 
</div> 

// codice CSS:

#parent { 
    background-color:#222; 
    position: relative; 
    height: 500px; 
} 
#child { 
    background-color:#444; 
    position: absolute; 
    bottom: 0px; 
    width: 100px; 
    height: 200px; 
} 

Di cosa ho bisogno per farlo realizzare ciò che sto cercando di fare? Potrei rinunciare alle regole CSS assolute/relative e creare semplicemente una tabella all'interno del DIV principale che mi consenta di ottenere sia l'allineamento del fondo che il contenuto che detta le dimensioni del genitore.

Tuttavia, mi piacerebbe sapere se esiste un modo per farlo in CSS e senza dover impostare la larghezza del DIV padre.

grazie in anticipo!

Answer 1

La risposta breve è che ciò che stai chiedendo in pratica non può essere fatto con puro CSS/HTML. (almeno senza tabelle) Avresti bisogno di Javascript che possa leggere la larghezza/altezza di # figlio e poi fare il calcolo che vuoi fare (non so) e impostare una nuova altezza/larghezza su #parent.

Altrimenti, se vuoi dire che l'altezza/larghezza di # del bambino cambia in base al suo contenuto, naturalmente questo è CSS nativo, basta impostare altezza/larghezza su automatico e poi iniziare ad aggiungere testo al suo interno che vedrai inizierà a crescere per adattarsi ai tuoi contenuti all'interno.

Dato che #child è posizionato in assoluto, viene preso fuori dal normale flusso del documento, pertanto non influirà sul #parent.

Answer 2

Con il moderno CSS, questo è fattibile.

HTML:

<div id="parent"> 
    <h3>Top Aligned Title</h3> 
    <div id="child"> 
     <p>CHILD ELEMENT</p> 
    </div> 
</div> 

CSS:

#parent { 
    background:red; 
    height: 500px; 
    position:relative; 
} 
#child { 
    background:green; 
    position: absolute; 
    top:100%; 
    -webkit-transform: translateY(-100%); 
    -ms-transform: translateY(-100%); 
    transform: translateY(-100%); 
    width: 100px; 
} 

http://jsfiddle.net/Bushwazi/bpe5s6x3/

1. transform:translateY(-100%); è il trucco. La matematica si basa sul elementbox-model.
2. È inoltre possibile combinare top:50%; con transform:translateY(-50%); per centrarlo.
3. È possibile scambiare top per left e translateY per translateX per posizionare l'elemento orizzontalmente.

Answer 3

Qui si va

HTML:

<main id="parent"> 
    <div class="popup">Top Aligned Title 
    <div class="content"> 
     Content 
    </div> 
    </div> 
</main> 

CSS:

#parent { 
    width: 120px; 
} 

.popup { 
    position: relative; 
    margin-top: 48px; 
} 

.content { 
    left: 0; 
    position: absolute; 
    background: green; 
    width: 100%; 
} 

http://jsfiddle.net/8L9votay/