Padding Verticale e altezza dell'area di contenuto della finestra del browser

[Nahall]

Come da specifica del W3C il padding verticale (top e/o bottom), quando espresso in percentuale, viene calcolato dai browser rispetto alla dimensione Orizzontale del Box Contenitore.

Questo significa che, ad esempio, in un div in cui è impostata un'altezza di 100px e una larghezza di 400px, impostando anche un padding-top e un padding-bottom pari all'1%, avremo come risultato finale lo stesso div maggiorato in altezza di 8px.
Per fare in modo che il div mantenga invece la sua altezza complessiva di 100px dovrò impostarne l'altezza a 92px.

Fin qui tutto bene, perché ho usato delle misure assolute e che conosco a priori.

Il problema sorge lavorando con box che si vogliono rendere larghi e alti esattamente come l'area massima di contenuto messa a disposizione dalla finestra del Browser, ossia impostando height e width del box al valore complessivo di 100%.

Supponiamo di avere la seguente dichiarazione:

html {
height:100%;
}

body {
margin:0px;
padding:0px;
height:100%
}

div#container {
width:100%;
padding:1%;
height:???
}

Per far si che il #conteiner sia esattamente pari all'area di contenuto della finestra del browser devo impostare un'altezza percentuale tale che la sua dimensione effettiva, sommata a quella effettiva del padding calcolata dal browser, dia l'altezza esatta dell'area di contenuto.

Se il padding fosse calcolato rispetto all'altezza del box mi basterebbe impostare l'altezza a 98%. Purtroppo, a causa della specifica CSS del W3C, non posso determinarla a priori, in quanto non esiste un rapporto numerico fisso tra la larghezza massima dell'area di contenuto e la sua altezza: quest'ultima dipende, oltre che dalla risoluzione dello schermo, dall'altezza della barra dei menù del browser.

L'unico modo che conosco per ovviare al problema è intervenire con un qualche script, ma se esistesse una soluzione solo CSS sarei molto più felice.

[Mich_]

Scusa se rispondo solo ora (ero in ferire).
L'argomento e` interessante, e nei CSS3 mi pare sita stato risolto con la possibilita` di definire la larghezza/altezza totale del blocco (un po' come fa IE) (questo e` quanto avevo letto qualche tempo fa, ma ora e` un po' che non ne sento piu` parlare).

In qualche caso si puo` risolvere con un blocco aggiuntivo; nel tuo caso specifico potrebbe bastare non definire l'altezza, se il contenuto e` alto per lo meno il 98%, in modo da riempire lo spazio.
Non saprei dirti come risolvere nel caso che il contenuto sia piu` basso. Forse il JS e` l'unica soluzione (neanche a me piace, pero`).

[Nahall]

Ti ringrazio per la risposta.

Posso dirti che nel frattempo ho adottato una soluzione che prevede semplicemente dei DIV di contenuto all'interno del DIV principale (di altezza 100% e senza margin o padding impostati).

Il problema era sorto avendo a che fare con siti dinamici a contenuto quindi variabile; il contenitore principale mi garantisce la presenza "a piena altezza" dello sfondo impostato, e la proprietà di overflow ad esso applicata mi assicura che il contenitore stesso non venga "scalvalcato" in altezza da un eventuale contenuto troppo ampio.

(...poi è nato il problema cross-browser della barra verticale di scorrimento, ma quello è un altro discorso... u.u).