due div entrambi con min-height 200%. possibile?

[blufragola]

Salve a tutti. Per esigenze di layout ho bisogno di avere 2 div contenitori, uno dentro l'altro, entrambi allungati al 100% (il primo di altezza 100% rispetto al body, e non c'è problema, il secondo di altezza 100% rispetto al suo contenitore). Purtroppo ho scoperto che non si possono usare due min-height annidati e, per questo motivo, non riesco ad ottenere quello che voglio in firefox e opera.

Qui ci sono i motivi, ma non è necessario leggerli se non ne avete voglia:
Il contenitore esterno (con larghezza 100% mi serve per contenere il contenitore interno e un footerwrapper largo il 100% della pagina, che viene posizionato in maniera assoluta al fondo dove metterò una sfumatura ripetuta orizzontalmente e un footer centrato. Mi serve che il contenitore interno (con larghezza in pixel stavolta) sia anch'esso alto 100% perchè voglio mettergli come sfondo le false colonne: se le metto nel contenitore esterno va tutto bene finchè non rimpicciolisco la pagina, perchè in questo caso l'header e il footer rimangono a posto, mentre lo sfondo centrale si sposta da una parte mandando in pezzi il mio layout.

Qualche idea? Grazie mille.

[blufragola]

Errore nel titolo:

intendevo min-height:100% e non 200% naturalmente


Scusate. Ho la mano più veloce del cervello... eheheh.

[webus]

non sono sicuro di avere capito, ma prova assegnando altezza 100% a:

html, body, #div1 {
height:100%;
margin:0;
}

#div2 {
min-height:100%;
margin:0;
}

Ovviamente suppongo tu sappia già che IE non supporta min[max]-width[height], ci sono però alcuni hack.

[blufragola]

Grazie, ho provato, ma in questo modo, con firefox, il div1, quello esterno, non si allunga fino al fondo della pagina quando il contenuto eccede l'area visibile nel browser, ma solo fino alla fine di questa,mentre quello più interno stranamente sì. Non capisco perchè ma fa così. Accidenti! L'ho sperimentato utilizzando due colori di sfondo che mi evidenziano i 2 div annidati. Che strano... dovrò trovare un escamotage...

Grazie comunque.

[webus]

prova così:

html, body {
min-height:100%;
margin:0;
}

#div1 {
height:100%;
margin:0;
}

#div2 {
min-height:100%;
margin:0;
}