altezza variabile

[Insaponata]

ho il seguente foglio di stile:

 
/*stili per il layout fluido*/
html,body
{
	margin: 0;
	padding:0
}
body
{
	font-family: arial,sans-serif;
	font-size: 76%
}
div#container
{
	position: relative;
	background-color: #FEDBC5
}

/*stili generici, su header e footer*/
div#header
{
	height: 80px;
	background-color:#36C;
	color: #ff0
}
h1,h2
{
	margin: 0;
	padding:0
}
h1
{
	padding-left: 20px;
	font: bold 2.3em/80px arial,sans-serif;
	background-image: url(img/top.jpg);
	background-repeat: no-repeat;
}
h2
{
	color: #69f;
	font-size: 1.5em;
}
.error
{
	color: red;
	font-size: 1.5em;
}
div#footer a
{
	color:#fff;
	font-weight: bold;
	text-decoration: underline
}

/*stili specifici per il layout*/
div#breadcrumbs
{
	height: 15px;
	padding: 0 175px;
    background-color: #FEDBC5; 
	color: #000
}
div#navigation
{
	position: absolute; 
	top: 95px; 
	left: 0;
    width: 160px;
	\width:170px;
	w\idth:160px;
	padding: 1em 0 0 10px;
	background-color: #FEDBC5;
	/*background-color: #FFCE9D;*/
}
div#extra
{
	position: absolute; 
	top: 95px; 
	right: 0;
    width: 160px;
	\width:170px;
	w\idth:160px;
	padding: 1em 5px;
	background-color: #FEDBC5;
}
div#content
{
	/*margin: 0 170px;*/
	margin-left: 170px;
	margin-right: 15px;
	padding: 1em 10px;
	background-color: #fff
}
div#content a
{
	color: #69f;
	font-size: 1.5em;
	text-decoration: underline;
}
div#content a:hover
{
	color: #36C;
}
div#footer
{
	text-align:center; 
	padding: 5px 0;
    background-color: #B6937F;
	color: #000
}

/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.4em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
div#navigation p{font-size: 90%}

/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}

Il problema è che se l'elemento navigation (barra laterale) è più alta (ci sono parecchie voci nel menù) dell'elemento content allora la barra di navigazione passa sopra al footer.

Come faccio a fare in modo che navigation, content e extra abbiano la stessa altezza heigth?

[pierofix]

Bella domanda. Ti propondo questa lettura:

- http://www.positioniseverything.net/...onetruelayout/

[Insaponata]

sto provando a giostrare con inherit... ma niente da fare... ho creato una specie di container per le tre colonne come indicato dall'articolo, ma non ci capisco più di tanto...

alemno su questo erano meglio le tabelle

come devo fare?

[seed_squall_it]

Ciao. Ho dato un'occhiata a grandi linee al codice CSS e ho visto che hai l'elemento navigation posizionato in modo assoluto. Gli elementi posizionati in questo modo assumono automaticamente uno z-index maggiore degli altri (posizionati nel normale flusso, ovvero in modo statico). Inoltre, vengono estratti dal normale flusso del documento e quindi non ne condizionano il layout. Per questo, quando la tua navigation è più alta del content, l'altezza che il browser considera è sempre quella del content (che è position: static di default). Un layout come il tuo richiederebbe di sapere con esattezza quale delle colonne sarà sempre e comunque la più alta e di posizionare in modo statico tale colonna. Tuttavia puoi risolvere il problema utilizzando la proprietà min-height per la colonna content. Dato che è questa la colonna più alta normalmente e che è posizionata im modo statico, ti basta fissare un'altezza minima che sia in grado di contenere sempre l'altezza della colonna navigation.

Ovviamente, IE non interpreta min-height, ma dato che non interpreta nemmeno la direttiva !important e considera height come se fosse min-height, puoi ricorrere a questo semplice hack:

min-height: 600px;
height: auto !important;
height: 600px;

In questo modo, sia IE che gli altri browser manterranno comunque un'altezza minima di 600 pixel per l'elemento content, forzando la barra inferiore a "stare al suo posto". Chiaramente, modifica il valore di height e min-height secondo le tue necessità.

[Georgias]

salve mi aggrego al discorso

ho un problema simile, ossia, la colonna deve avere una dimensione fissa (430px) e allungarsi nell'eventualità vi sia necessità di riempirla, ma se inserisco:

min-height: 430px;
height: auto !important;
height: 430px;

su opera e mozzila è perfetto, ma su explorer (che premesso mi faceva ciò che volevo) determina la lunghezza in auto e la rimpicciolisce a seconda del contenuto della colonna.

come posso risolvere il problema??
tks G

[Georgias]

ho risolto cosi:

min-height: 430px;
max-width:auto;
height: auto !important;
height: 430px;

funziona perfettamente su tutti i browser

ciao

[seed_squall_it]

Uhm...c'è una cosa che non mi torna...vediamo se ho capito.
Tu dici che la colonna deve avere un'altezza minima fissa (e sarebbe la min-height non supportata da IE) di 430px e deve "allungarsi" se il suo contenuto supera tale altezza, giusto? Solo non capisco cosa c'entri averci messo max-width: auto...che tra l'altro Explorer non supporta affatto! L'hack per far interpretare la min-height anche a Explorer funziona (tanto che l'ho usato anche io nel mio sito diverse volte), ma a questo punto mi viene il dubbio che a te non funzionasse perché la colonna non aveva impostata una larghezza (e IE si sia inventato chissà cosa quando ha visto un max-width: auto...). Perché il trucco del min-height funzioni, bisogna che la colonna abbia una larghezza fissa, altrimenti si "allarga" per far stare i suoi contenuti invece di alzarsi.

Poi magari ho capito male io...fammi sapere.