Div Height 100%

**csdnk** · 10-12-2008, 17:44

Ciao a tutti ho un problema con il parametro height di un div. L'obiettivo è quello di avere i due div della stessa altezza, in altre parole parole l'altezza del div menu deve essere uguale all'altezza del div news. Allo stato attuale delle cose il div menu termina molto prima.
Qualcuno ha una soluzione per questo problema???

Grazie

Vi posto il codice:

<html>
<head>
<style type="text/css">
body{
}

#news{
width: 300px;
background-color: blue;
height: auto;
float: left;
}

#menu{
width: 300px;
background-color: green;
height: 100%;
float: left;
}
</style>
</head>

<div id="root">

<div id="news">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div>
<div id="menu"></div>

</div>

</html>

**lila89** · 10-12-2008, 17:58

....avendo impostato l'altezza delle news "auto" qst si adatterà al contenuto, non potrà mai essere uguale all'altezza del menu a meno che il menu sia impostato su auto e abbia un tot di parole per raggiungere la stessa altezza;

hai impostato l'altezza del menu 100%... ma non hai specificato l'altezza del body, quindi il menu risulta corto xkè non ha punti di riferimento sull'altezza del suo contenitore;
imposta un altezza al body e poi il menu risulterà davvero 100% della misura del body (contenitore padre in qst caso);

se vuoi che i due contenitori abbiano la stessa altezza devi impostargliela tu, in pixel, o in percentuale, altrimenti lasciando altezza auto non saprai mai l'altezza effettiva, in quanto varia per il conetnuto.

se metti l'altezza fissa (px, o %) poi per le news metti overflow-y:auto e metterà direttamente la scrool bar.

**csdnk** · 10-12-2008, 18:06

Quindi non esiste un modo per collegare l'altezza del div news (che si adatta al contenuto) all'altezza del div menu??

Grazie 1000!

**Mich_** · 10-12-2008, 18:13

Il metodo comunemente usato e consigliato piu` volte in questo forum si chiama
False Colonne (faux columns) - fa` una ricerca nel forum con tali parole per capirne di piu`, oppure consulta i "link utili".
In tale metodo lo sfondo viene assegnato al contenitore e i blocchi interni sono trasparenti.

Nota: e` necessario il clear alla fine dei blocchi flottati, altrimenti la cosa non funziona

Discussione: Div Height 100%

Strumenti discussione

Ricerca discussione

Visualizza

Div Height 100%

Permessi di invio