altezza div figlio ereditata da dal div padre

**mighi** · 23-01-2014, 18:24

Ciao a tutti,
ho un problema.

io ho una struttura del genere:

codice:

<div id="genitore">
<div id="colonna_sinistra"></div>
<div id="corpo_del_sito"></div>
</div>

in sostanza tutto il contenuto sarà all'interno di corpo_del_sito che quindi avrà un altezza molto superiore a colonna_sx; ora io vorrei riuscire a fare in modo che colonna_sinistra sia alto uguale a corpo_del_sito.
Il css è il seguente:

codice:

#genitore {



height: auto;
min-height: 100%;
}
#colonna_sinistra {



width: 20%;
height: 100%;
}
#corpo_del_sito {



width: 80%;
height: 100%;
}

pero cosi facendo, non ottengo quello che vorrei!!!
cioè in realtà dovrebbe prendere l'altezza del div fratello più che dal padre. non so se si dica cosi, ma l'importante è che ci capiamo

ho letto in giro che probabilmente non e possibile ma mi rifiuto di crederci.
Qualcuno può aiutarmi??

**bedo1** · 24-01-2014, 10:57

...ti consiglio di documentarti in rete su "layout a 2 colonne uguale altezza"...

**mighi** · 24-01-2014, 18:02

Ti ringrazio...in effetti non riuscivo a trovare le parole per fare una ricerca decente...

Comunque la soluzione che ho trovato e di assegnare al div padre un display:table; e alle colonne un display:tabel-cell;height:100%;
Per quanto ho provato anche altre soluzioni tipo falsi background e cose cosi, ma sono tutte soluzioni tampone che non vanno a risolvere il problema alla radice!!!
Spero possa essere utile per qualcuno..

Ciao e grazie ancora

**mighi** · 24-01-2014, 18:21

Mi devo correggere, questa soluzione funziona solo se la prima colonna e piu alta della seconda, in questo modo suggerisce l'altezza alla successiva, al contrario invece non funziona, a meno che non si imposti un overflow-y:scroll; alla seconda. Ma come soluzione sia a livello estetico che di usabilità a basse risoluzioni non e proprio il massimo.

Quindi per rispondere alla domanda...hai trovato una soluzione?? La risposta è no...

**Prill** · 24-01-2014, 20:39

Le altezze in percentuale richiedono la specificazione dell'altezza dell'elemento contenitore generale. Quindi una cosa così

codice HTML:

<style type="text/css">
<!--
* {
    margin:0;
    padding:0;
}
html, body {
    height:100%;

}
.myDiv {
    height:100%;
    width:200px;
}
#right, #left {
    width:100px;
        height:100%;
}
#right {
    float:right;
    background-color:#FFCCCC;

}
#left {
    float:left;
    background-color:#9999FF;
}
#clear {
    clear:both;
    height:0
}
-->
</style></head>

<body>
<div class="myDiv">
 <div id="left">&nbsp;</div>
 <div id="right">&nbsp;</div>
 <div id="clear"></div>
</div>
</body>
</html>

funziona. Non però col min-height, ma la tecnica delle false colonne è economica e risolve con semplicità

**deleted_20210415** · 25-01-2014, 07:24

Prendi spunto da qui se vuoi, ci sono giusto tre righe di codice jQuery.

http://jsfiddle.net/8z2X8/1/

**mighi** · 25-01-2014, 13:02

Il mio problema era che non potendo prevedere le altezze dei due div non potevo neanche impostare l'altezza del contenitore...in caso la seconda colonna fosse stata piu lunga della prima, impostando 100% di altezza al contenitore, i prodotti si sarebbero sovrapposti al footer (che si trova subito all'esterno del contenitore)...ma alla fine controllando e ricontrollando ho visto che avevo impostato dei float:left; alle colonne che con i display:table-cell; non vanno affatto d'accordo.

Credo che questa sia l'unica soluzione...
Quindi per ricapitolare:

Al div contenitore non imposto niente, se non la larghezza

Alle due colonna imposto larghezza e display:table-cell;

Questa volta ho fatto un po di prove e funziona... sia che la secondo colonna sia piu lungha che piu corta!!! grazie per l'aiuto

Discussione: altezza div figlio ereditata da dal div padre

Strumenti discussione

Ricerca discussione

Visualizza

altezza div figlio ereditata da dal div padre

Permessi di invio