altezza di un div

**perseogiugno75** · 03-05-2006, 20:15

ciao a tutti
sto realizzando un semplice impaginato con i css ma mi sono bloccato su una cosa...
ho un div "contenitore" e 5 div interni chiamati rispettivamente "testata", "navigazione", "colonna", "contenuti" e "piede"
questo è l'html:

<html>
<body>
<div id="contenitore"></div>
<div id="testata"></div>
<div id="navigazione"></div>
<div id="colonna"></div>
<div id="contenuti"></div>
<div id="piede"></div>
</div>

e questo è il CSS

html,body{margin:0; padding:0; height:100%}
body{font-family:"Lucida Grande"; font-size:76%; text-align:center; height:100%}
#contenitore{width:800px; height:100%; margin: auto; padding:0; clear:both}
#testata{width:auto; height:150px; background-color:#00FF00;}
#navigazione{width:auto; height:30px; background-color:#CC0000;}
#colonna{width:200px; height:auto; background-color:#9900FF; float:left;}
#contenuti{width:auto; height:600px; background-color:#3300CC;}
#piede{width:auto; height:30px; background-color:#FF00FF;}

il mio problema è il seguente...
come posso fare si che la colonna sia automaticamente alta fino al piede?
Sperando di essere stato sufficentemente chiaro, vi ringrazio per ogni aiuto...

**Mich_** · 04-05-2006, 08:31

Nel tuo HTML c'e` un errore: un </div> di troppo (non e` certo quale sia).

Comunque la struttura andrebbe modificata:

codice:

<body>
  <div id="contenitore">
    <div id="testata"> ... </div>
    <div id="navigazione"> ... </div>
    <div id="corpo">
      <div id="colonna"> ... </div>
      <div id="contenuti"> ... </div>
    </div>
    <div id="piede"> ... </div>
  </div>
</body>

Dopodiche` il CSS seve essere modificato:

aggiungi width: 100%; ad html e body,
aggiungi delle regole per #corpo: width:100%, ma non definire height, o mettilo auto
metti height: 100% a colonna e contenuti

In alternativa, usa il trucco delle false colonne:

nonmettere sfondo a colonna e contenuti
metti uno sfondo a corpo in modo che simuli le colonne (devi fare una immagine alta 1 px e larga quanto il corpo con i due colori da te scelti nella proporzione corretta

PS: dovresti anche specificare border:0; margin:0; padding:0; a tutti i blocchi, altrimenti i conti non tornano. Tale specifica puoi anche scrvierla all'inizio, con il selettore * (asterisco).

**perseogiugno75** · 04-05-2006, 09:44

innanzitutto, grazie per l'intervento...
il problema rimane...
l'altezza della colonna si adatta prfettamente....però, se la colonna ha dentro elementi che occupano più spazio in altezza rispetto al div contenuti, quest'ultimo appare chiaramente più corto della colonna...credo dovrò optare per la tua seconda soluzione...grazie mille

Discussione: altezza di un div

Strumenti discussione

Ricerca discussione

Visualizza

altezza di un div

Permessi di invio