Div che riempe lo spazio fino a fondo pagina

[flash20]

Ciao a tutti, sto litigando con i css e non riesco a trovare una soluzione, ho una serie di div con un width 100% e un altezza fissa, alla fine di questi div volevo aggiungerne uno (footer) con un colore di sfondo che vada a riempire lo spazio restante della pagina, ma ho qualche problema.

1- Se gli do altezza 100%, non essendo l'unico elemento della pagina lo scroll va ben oltre il fondo pagina.
2- Se non gli do l'altezza o metto height auto, non essendoci nulla all'interno del div non si visualizza nulla, perchè per lui non ha altezza.

Vorrei fare qualcosa per l'appunto che permetta al footer di riempire la parte restante della pagina in funzione della dimensione del browser e degli elementi all'interno della pagina.

Grazie

[flash20]

Questo è l'esempio semplificato dell'HTML:

<div class="container">

<div class="box2">[img]immagini/disegno_menu1.png[/img]</div>

<div class="box1">[img]immagini/disegno_menu2.png[/img]</div>

<div class="footer"></div>

</div>

Questo invece il CSS:

html, body{
		height:100%;
}
.box1{
	width:100%;
	height: 70px;
}
.box2{
	width:100%;
	height: 100px;
}
.footer {
	background-image:url(../immagini/sfondo-basso.jpg);
	background-repeat:x;
	width:100%;
	height:100%;
}

Vorrei per l'appunto che box1 e box2 occupino 170px di altezza dello schermo e che il footer occupi il restante fino in fondo (l'altezza di box1 e box2 è variabile)

Grazie

[webdemo]

attualmente il div footer va ad occupare il 100% (+ 170px dei due div sopra)

[flash20]

E si infatti, potrei dargli un margin-top: -170px ma se i due div sopra hanno una dimensione diversa mi torna il problema, come faccio a fare una cosa flessibile?

[webdemo]

potrebbe essere tutto in %

.box1{
	height: 7%;
}
.box2{
	height: 10%;
}
.footer {
	height:83%;
}

[flash20]

Non va bene perchè i box sopra potrebbero avere 1 paragrafo oppure 10 e la loro altezza varierebbe in funzione del contenuto, quindi non possono avere un valore in %, perchè se no l'altezza sarebbe correlata alla grandezza del browser.

[webdemo]

probabilmente devi chiedere aiuto a JS e fare ogni volta un calcolo del genere:

altezza della finestra - box1 - box 2 = altezza footer

[supercapocc]

Originariamente inviato da webdemo
probabilmente devi chiedere aiuto a JS e fare ogni volta un calcolo del genere:

altezza della finestra - box1 - box 2 = altezza footer

Si, confermo. Con un'altezza variabile, l'unica soluzione è javascript. Il tuo è un problema molto comune, speriamo che prima o poi ci sia una soluzione definitiva in puro CSS.

[flash20]

Noooo ho provato in ogni modo con i CSS, pensavo di sbagliare io, ma a quanto pare allora no. Che palle. Grazie mille in ogni caso