Newsgroup: it.comp.www.html
Titolo: CSS height 100%

Salve ragazzi, sto tentando di creare un layout con xhtml + css, che si
espanda automaticamente al 100% dell'altezza della pagina.
Per un esempio andate su 
http://www.beholder.it/index2.html
Il problema è che sia con opera 7 che con Mozilla, se non metto testo
nella pagina, tutto bene e il layout lo vedo normale (
http://www.beholder.it/index3.html
 ), ma se provo a mettere una serie di
<p>a</p> ( come nell'esempio index2.html ) allora le "a" scavalcano la
parte gialla e blue. Con ie6 la parte gialla si adatta a contere le "a",
ma la parte verde no.
Come posso risolvere?
In:
#wrapper {
	height:90%; <-- qui ho messo 90% a tentativi, ma non ho capito
                        perchè se metto 100%, la pagina va oltre e
                        compaiono le barre verticali
}
Grazie
Ciao
-- 
questo articolo e` stato inviato via web dal servizio gratuito 
http://www.newsland.it/news
 segnala gli abusi ad 
ab...@newsland.it



Salve ragazzi sto tentando di creare un layout in xhtml + css.
Se provate a visitare
www.beholder.it/index2.html
Con opera7 e Mozilla, le "a" scavalcano la parte gialla e blue. Domanda:
Perchè la pagina non si espande per contenere le a?
Con IE6, la parte gialla si espande, ma non la parte verde.
In 
www.beholder.it/index3.html
 potete vedere la stessa pagina, senza
testo. Viene vista correttamente sia con Opera, Mozilla che IE6.
Nell css ho definito #wrapper con height 90%, ma assolutamente a
tentativi. Mettendo 100%, la pagina si espande troppo e compaione le barre
veritali. Perchè questo?
Grazie


Lo stille č quello di explorer quando salva... magari lo ritocchi un pň.. :)
-- 
:: Massimiliano Mattei
:: Project Leader
:: EVA Group :: 
www.evagroup.net
:: Soluzioni extranet :: e-business :: corporate portal
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd
">
<!-- saved from url=(0034)
http://www.beholder.it/index2.html
 -->
<HTML lang=en xml:lang="en"
xmlns="
http://www.w3.org/1999/xhtml
"><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>HTML {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px;
PADDING-TOP: 0px; HEIGHT: 100%
}
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px;
PADDING-TOP: 0px; HEIGHT: 100%
}
#wrapper {
}
#head {
 HEIGHT: 30px; BACKGROUND-COLOR: red
}
#colsx {
 FLOAT: left; WIDTH: 15%; HEIGHT: 100%; BACKGROUND-COLOR: yellow
}
#cont {
 FLOAT: right; WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: green
}
#footer {
 CLEAR: both; HEIGHT: 30px; BACKGROUND-COLOR: blue
}
</STYLE>
<META content="MSHTML 6.00.2800.1400" name=GENERATOR></HEAD>
<BODY>
<DIV id=wrapper>
<DIV id=head></DIV>
<DIV id=cont>
<DIV id=colsx>
<P>a</P>
<P>a</P>
<P>etc.....</P>
</DIV>
</DIV>
<DIV id=footer></DIV></DIV></BODY></HTML>

 Lo stille č quello di explorer quando salva... magari lo ritocchi un pň.. :)
Veramente con Opera non occupa il 100% dell'altezza ( ma il minimo ) e con
ie5 va quasi bene, ma va oltre il 100% della pagina.
Non credevo di trovare tanti problemi per visualizzare una pagina
sfruttando come minimo tutto lo spazio disponibile.
Ciao


Questo che ti ho postato io, varia in base ai contenuti, non ha un altezza
fissa. Se vuoi un altezza fissa ti conviene utilizzare al posizione assoluta
per il layer di chiusura e lo setti a bottom: 0px; cercando poi di far stare
i contenuti all'interno di una singola pagina.
