adattare all'altezza del browser

[Claudio Vituzzi]

Non riesco a far adattare i div della mia pagina web all'altezza del browser (height)

questo è la pagina: http://www.theartofweb.altervista.org/ervituzzi/

la pagina è cosi' composta:

+----------------------+
| head |
+----------------------+
| |
| logo |
+----------------------+
| footer |
+----------------------+

i divs head,logo e footer sono contenuti in wrap che ha width: 100% e height: 100%

head ha height: 50px
footer ha height: 50px;

logo non ha height settato (anche se adesso nella pagina web linkata e settato a 400px)

se settassi logo a height: 100% mi apparirebbe lo scroll...

come posso fare?

grazie e buona pasqua

[Claudio Vituzzi]

sono disperato

ho provato anche con:

	height: auto;

nel div "logo" ma non va e non capisco perchè, quando ad esempio do un width: 100% si adatta ma con height no.

è un vero peccato perchè con le tabelle mi bastava fare:

<table height="100%">
 <tr>
  <td height="50"></td>
 </tr>
 <tr>
  <td>logo</td>
 </tr>
 <tr>
  <td height="50"></td>
 <tr>
</table>

e la cella che conteneva "logo" si adattava da sola ... perchè con i css no?

ciao

[Marcolino's]

Perché nemmeno in html potevi farlo, o meglio, i browser te lo consentivano ma nel codice non c'era quell'attributo.
html4 - table

MA puoi simularlo anche con i fogli di stile, solo che dipende un poco dal browser che usi, dato che IE ha un problema con il box model, e qualche idiosincrasia congenita con la proprietà height, mentre Mozilla giustamente non ti prende il 100% con height.

Allora per "fregarli" a tutti e due, devi prima di tutto, dare: html, body {height: 100%} che frega Mozilla, poi dovrai giocare con il box model hack per IE.

Mozilla nel box che vuoi mostrare alto 100% della pagina si accontenterebbe di un bel min-height: 100% ma IE non riconosce questa proprietà ma legge height come se fosse min-height, quindi con il box model hack freghi tutti, così:

html, body {height: 100%}
#contenitore {
min-height: 100%;
height: auto !important;
height: 100%
}

Dentro contenitore che sarà alto al 100% della pagina, devi inserire testa, logo e piede, in modo che testa sia in alto, i piedi in basso e il logo ... dove ti pare.

[Claudio Vituzzi]

mi puoi fare un esempio tu di due righe con tre box div di cui il primo ha height 50px il secondo ha height variabile e il terzo ha height 50px, cosi' che se io ridimensiono in altezza il browser quella di mezzo varia in altezza e il terzo div rimane sempre attaccato al bottom del browser...

grazie mille

[Claudio Vituzzi]

aiuto!

[Claudio Vituzzi]

purtroppo ho dovuto usare la soluzione con tabella:

http://www.theartofweb.altervista.org/ervituzzi/

speriamo che si veda bene sui vari browsers

grazie lo stesso

ciao

[andrea.paiola]

Originariamente inviato da Claudio Vituzzi
purtroppo ho dovuto usare la soluzione con tabella:

http://www.theartofweb.altervista.org/ervituzzi/

speriamo che si veda bene sui vari browsers

grazie lo stesso

ciao

noooooooo... che hai fatto?
appena mi giro e ti perdo di vista un attimo parti di tabelle!
strutturiamo come si deve sta pagina:

<div id="testa"><div id="menu"></div><div id="messenger"></div></div>
<div id="corpo"></div>
<div id="piede"><div id="w3c"></div><div id="mac"></div></div>

domani te la riempo coi dati e poi la sistemiamo coi CSS...
ps: ma Giangaetano è tuo fratello?

[Claudio Vituzzi]

no sono io, grazie per l'aiuto

[andrea.paiola]

<div id="testa">
<div id="testa">
<div id="menu">
<ul>[*]VITUZZI'S FORUM[*]THEARTOFWEB2005[*]THEARTOWEB'S FORUM[*]WINSHARED0.4.4[*]CONTACT[/list]
</div>
<div id="yahoo"></div>
</div>
<div id="corpo"></a></div>
<div id="piede">

</div>
<div id="mac_made">[img]img/made_on_mac.gif[/img]</div></div>

ho cercato di matenere e rispettare, dove possibile e non evidentemente errato, le tue scelte di progettazione...ok adesso abbiamo il codice html (quello che sta fuori dal body penso che sai metterlo da solo )... oggi pomeriggio o domani lo "impaginiamo" coi CSS

[Claudio Vituzzi]

cmq sempre a scopo didattico.

Il mio sito com'è adesso mi piace troppo: http://www.theartofweb.altervista.org/ervituzzi/