altezza 100% problematica

**Zerg010** · 24-06-2006, 01:42

s alve, volevo chiedere se mi si potesse aiutare con un problema suppongo abbastanza banale .
Stò creando un css utilizzando Opera 9 come browser di prova. allego dati HTML e CSS:

HTML

codice:

...
<body>
<div class="container">
...
</div>
</body>
...

CSS

codice:

body {
	height:100%;
	width:794px;
	text-align: left;
	background-color:#C2C2C2;
	margin: 0 auto;
}
.container{
	height:100%;
	position:relative;
	bottom:0;
	top:0;
}

impostando per il body o per la classe container il valore altezza 100%, o altezza minima in percentuale, non ottengo risultati. Tutti gli elementi della pagina si dispongono nel modo corretto solo con valori in pixel.
spero di non essere stato vago e ringrazio anticipatamente

**Mich_** · 27-06-2006, 09:21

I browser piu` conformi hanno di default alcuni blocchi che vanno definiti:
html
body
Nel tuo caso hai definito alcuni parametri per body, ma non per html (che in pratica corrisponde alla finestra), per cui il 100% del tuo body si riferisce ad un blocco la cui altezza non e` definita.

Per far andare a posto il tutto anche con IE (che rimane purtroppo il browser piu` diffuso), conviene:

codice:

html {
  height: 100%;
  width:100%;
  font-size: 100%;
}
body {
	height:100%;
	width:100%;
	text-align: center;           /* serve per centrare il container in IE */
	background-color:#C2C2C2;
}
.container{
	height:100%;
	position:relative;
	bottom:0;
	top:0;
	width:794px;
	text-align: left;
	margin: 0 auto;   /* per centrare nei browser standard */
}

**decemberist** · 27-06-2006, 12:15

perchè a me diviene addirittura più lunga del 100%?
ho seguito esattamente questi consigli

**Zerg010** · 28-06-2006, 01:14

Grazie mille Mich_

decemberist, io ho risolto dando al body altezza e largezza di 98%

**decemberist** · 28-06-2006, 01:20

grazie! non ci avevo pensato.
la prossima settimana provo.
(pausa vacanze)

Discussione: altezza 100% problematica

Strumenti discussione

Ricerca discussione

Visualizza

altezza 100% problematica

Permessi di invio