[CSS] Overflow su layout liquido

[AVRstudio]

Salve a tutti
Avrei bisogno di un piccolo aiuto per implementare un layout liquido che sto elaborando per una mia applicazione. Ho cercato un po' in giro e su varie guide, ma non riesco a focalizzare la soluzione.
La questione è semplice, guardate qui:

http://www.avrstudio.net/varie/screen.jpg

Devo impostare, in questo layout, il livello dei contenuti (main) in modo che occupi tutto lo spazio disponibile, ma che, allo stesso tempo, qualora il contenuto ecceda in dimensioni lo spazio disponibile, compaia la barra di scorrimento solo su quel <div>.
So perfettamente che dovrei utilizzare la proprietà "overflow" ma se la imposto su "auto" il risultato è quello dell'immagine.

La parte di CSS utilizzata al momento per il layout è questa:

html,body	{
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			}
			
body		{
			background-color: #FFFFFF;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 76%;
			}

div#container {
			position: relative;
			background-image: url(../img/menu_bg.jpg);
			background-position: top left;
			background-repeat: repeat-y;
			background-color: transparent;
			width: 100%;
			height: 100%;
			}

div#header	{
			height: 25px;
			width: 100%;
			background-color: #36566F;
			position: absolute;
			top: 0px;
			text-align: right;
			}
		
div#menu	{
			width: 230px;
			position: absolute;
			top: 0px;
			left: 0px;
			background-image: url(../img/logo_menu.jpg);
			background-position: top center;
			background-repeat: no-repeat;
			background-color: transparent;
			}

div#main	{
			background-color: #FFFFFF;
			position: absolute;
			top: 30px;
			left: 230px; /* Deve essere uguale alla larghezza del menu */
			clear: right;
			overflow: auto;
			}

div#footer	{
			height: 25px;
			width: 100%;
			background-color: #36566F;
			position: absolute;
			bottom: 0px;
			text-align: right;
			}

Probabilmente sbaglio proprio alla radice, potete aiutarmi a capire per favore?
Grazie mille, anticipatamente

[thomas_anderson]

ciao!
hai un'impaginazione a tutto schermo. la caratteristica di un'impaginazione liquida è che si adatta al contenuto, ossia il contenuto è direttamente proporzionale alle dimensioni del box e viceversa.
non ha molto senso impostare height al 100%. il valore percentuale di height si calcola in relazione al blocco contenitore, in questo caso body. quindi è come se tu dicessi usa il 100% dell'altezza di qualcosa che è già al 100%, ossia tutta la finestra del browser. il valore di default è auto. height: auto dice al browser di occupare tutto lo spazio che può, cioè 100%. questo, per quanto riguarda body è uniforme anche su IE. se tu imposti un'height esplicita puoi avere problemi con IE, che ha un concetto di box contenitore diverso. infatti se per un browser conforme la relazione fra elementi della pagina è:

[html] [[head]] [[[body]]]

per IE diventa:

[*] [[html]] [[[head]]] [[[[body]]]]

dove * sta per un misterioso elemento che circonda html. quindi tutti i suoi calcoli sono sfasati di un livello. il mio consiglio è quello di non impostare height, ma di usare un layout normale, al massimo impostando width. se hai dei contenuti che sono inferiori all'altezza di pagina, devi cmq sapere che IE interpreta in quel modo che ti ho detto. soluzioni sono gli hack:

http://gabrieleromanato.altervista.o...one-di-ie-win/



consulta anche http://www.constile.org/ min-height su IE.

[AVRstudio]

Eheh, condivido le tue osservazioni e vedrò di correggere il correggibile, ma la realtà dei fatti è che purtroppo sono vincolato a quel tipo di layout dalla scelta del "committente" dell'applicazione. Applicazione, non sito, perchè si tratta di una sorta di "gestionale" che mi vincola nelle scelte dell'interfaccia.

Eppure mi sembra che sia possibile, mi sembra di aver visto qualcosa di simile in giro per il web. Mi sbaglio?

[AVRstudio]

uppettino, visto che la questione, per me, è piuttosto importante

[thomas_anderson]

Quello che ti posso consigliare è questo:

imposta un contenitore in percentuale con altezza e larghezza. per es:

#container {
  width: 80%;
  height: 80%;
  overflow: auto;
}

con 'overflow' su 'auto', come da specifche (http://www.w3.org/TR/REC-CSS2/visufx.html )
il browser è costretto a fornire un meccanismo di scorrimento. quel contenitore puoi poi posizionarlo dove vuoi con la proprietà 'position'.

[whisher]

Ciao.
Posso sbagliarmi ma questa rule
ti darà molti problemi e ti taglierà
il layout se il layout eccede la
finestra del browser:

div#footer    {
            height: 25px;
            width: 100%;
            background-color: #36566F;
            position: absolute;
            bottom: 0px;
            text-align: right;
            } 

toglierei pure il clear al div#main.