Footer "Fixed" che visualizza una scrollbar in altezza

[Acedduz]

Salve a tutti, sto da giorni realizzando un sito web strutturato "orizzontalmente" e che quindi, di norma, non dovrebbe mai visualizzare una scrollbar verticale. Purtroppo ho trovato un fastidioso problema.

Diciamo che il mio sito è strutturato così:

Menu 200px a sinistra
Contenuti che si sviluppano orizzontalmente alla destra del menu
Footer presente sotto menu e contenuti.

Se la pagina è della giusta risoluzione non ci sono problemi infatti, uno schema che rappresenta il mio sito funzionante potrebbe essere il seguente:

http://i52.tinypic.com/2rxy3ib.png

E fin qui, come dicevo, nessun problema. Le cose cambiano però quando la pagina o viene ristretta dall'utente, oppure la risoluzione in altezza non è tale da permettere la visualizzazione di tutto il sito.

In quel caso, ovviamente, essendo il footer definito con position "fixed", si va a sovrapporre ai contenuti come di seguito:

http://i53.tinypic.com/28034a8.png

Sostanzialmente il Footer si va a sovraporre ai contenuti essendo logicamente elemento fisso della pagina. Quello che intereserebbe a me, è mantenere comunque il footer fisso in modo che quando scrollo verticalmente il footer non venga mosso, ma allo stesso tempo, quando la pagina è troppo ridotta in altezza per visualizzare sia footer che contenuti, creare una scroll verticale che mantenga il footer alla fine della pagina e che non lo sovrapponga ai contenuti.

Qualcuno ha delle idee?
Grazie in anticipo a tutti!

[Acedduz]

Per facilitare la comprensione della pagina allego il codice:

<style type="text/css">

body {

margin: 0px 0px 0px 0px;

}

.menu {


border: 3px solid #FFFFFF;
left: 0px;
background-color: #008000;
height: 80%;
width: 200px;
position: fixed;

}

.contents {

border: 3px solid #FFFFFF;
left: 200px;
position: absolute;
white-space: nowrap;
background-color: #666666;
width: 100%;
height: 80%;

}

.footer {


border: 3px solid #FFFFFF;
bottom: 0px;
background-color: #FF0000;
height: 20%;
width: 100%;
position: fixed;

}

</style>

<div class="menu">MENU</div>
<div class="contents">CONTENTSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS SSSSSSSSSSSSSSSSSSSSSSSS</div>
<div class="footer">FOOTER</div>

[lucavizzi]

potresti usare delle altezze percentuali,
90% per contenuti e menu e 10% per footer, assegnando un overflow:auto al box dei contenuti.

[Acedduz]

Sì questo ragionamento lo avevo fatto anche io ed in teoria potrebbe funzionare, il grosso problema è che avendo il sito sviluppato orizzontalmente la scroll per i contenuti la andrei a visualizzare alla fine dello scorrimento orizzontale, di conseguenza l'utente che riduce la finestra non ha a portata di mano la scroll che risulta quasi inesistente se non si scorre la pagina...

Purtroppo l'inversione della scroll da destra a sinistra crea problematiche a livello di contenuti quindi è inutilizzabile.
Cerco infatti soluzioni alternative...