altezza 100%

**Stryker** · 30-11-2004, 19:06

Ciao a tutti.
Browsando nel forum ho scoperto che dichiarando (in css) height: 100% nell'html e nel body (e ovviamente nell'elemento) è possibile creare elementi alti quanto la pagina come si faceva con le tabelle.
Il problema è che nei browser diversi da IE, se col contenuto supero l'altezza della pagina, mi viene tagliato, perchè html e body rimangono appunto alti quanto una singola schermata. E d'altra parte "min-height" non è supportato da IE e non funziona nemmeno bene negli altri.
Supponendo che io non sia l'unico ad aver riscontrato questo problema, c'è una soluzione che in generale si adotta in questo caso?
Graize!

edito: dimenticavo di dire che tutto ciò capita in pagine xhtml

ri-edito: dimenticavo anche di dire che "overflow: visible" l'ho settato dappertutto, ma non è servito

**Jerry Masslo** · 30-11-2004, 19:22

ie legge height come fosse min-height mentre gli altri browser leggono giusto

ho idea che ti serva qualcosa del genere, che stranamente non hai trovato nella tua ricerca;

.elemento {
min-height:100%;
height:auto!important;
height:100%
}

ie non legge !important

**Stryker** · 30-11-2004, 19:37

così funziona perfettamente per gli altri browsers, ma l'elemento in IE non è più alto 100% (nel caso il contenuto sia poco)

**Jerry Masslo** · 30-11-2004, 20:13

puoi postare del codice? perché ie dovrebbe leggere l'height:100%, sovrascritto dagli altri browser quindi credo che nel tuo codice ci sia qualcos'altro che non va

**Stryker** · 30-11-2004, 20:44

come non detto: errore mio che avevo messo il trick anche a <body> e <html> e invece dovevo metterlo solo all'elemento. così funziona perfettamente!
grazie!!!

**Stryker** · 01-12-2004, 16:32

Il problema s'infittisce!

Ora il mio contenitore è alto 100% e si allunga ulteriormente da solo su tutti i browsers.
Però ora ho problemi a farlo con il mio eventuale contenuto. Ammettendo di dover fare la stessa cosa con un altro <div> all'interno del primo (in effetti, è proprio quello che devo fare), c'è una maniera per tenere alto 100% anche ques'altro elemento?

Ho dato all'elemento interno gli stessi settaggi (riguardo l'altezza) di quello esterno, ma non rimane lungo al 100% su mozilla (mentre su ie e opera si). Riguardo l'allungamento automatico invece non ci sono problemi.
Incollo il codice della pagina di prova che ho fatto e allego le immagini dei tre diversi rendering.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>prova</title>

<style>

html {
	height:100%;
	}

body {
	margin: 0px;
	padding: 0px;
	background-color: silver;
	height:100%;
	}

#contenitore {
	width: 320px;
	margin: auto;
	background-color: red;
	min-height:100%; 
	height:auto!important; 
	height:100%;
	}

#contenuto {
	width: 300px;
	margin: auto;
	min-height:100%; 
	height:auto!important; 
	height:100%;
	background-color: white;
	}

</style>

<body>

<div id="contenitore">

<div id="contenuto">

aaa

aaa

aaa

aaa

aaa

aaa

aaa



</div>

</div>

</body>
 
</html>

ie: ok

opera: ok

firefox/netscape: NO!

**sko22** · 02-12-2004, 11:41

l'hai risolto?

**Jerry Masslo** · 02-12-2004, 11:59

se dai un min-height poi al suo interno non puoi dare un altro min-height in percentuale perché non ha riferimenti di height, cioè sta per height:auto, almeno con mozilla in opera ti funzionerà lo stesso,

quello ti funziona in opera perché la dtd è transitional in strict non ti funziona nemmeno in opera

non ho capito che devi fare, non ti basta un solo min-height e per il rosso dei bordi?

**Stryker** · 02-12-2004, 14:11

No, devo estendere anche il bianco (che sta all'interno del rosso) fino in fondo alla pagina (quindi esattamente fin dove arriva il rosso). Solo che i mozilla sembrano ignorare totalmente il settaggio di height di questo elemento, se espresso in percentuale. Che io metta anche semplicemente height 100% o 50%, il bianco rimane cmq alto quanto il suo contenuto.
In pratica devo fare in modo che mi si veda anche su mozilla come si vede su ie e opera: sia il rosso che il bianco estesi fino in fondo (ed eventualmente di più, nel caso il contenuto fosse eccedente).

**Jerry Masslo** · 02-12-2004, 18:22

non hai detto perché devi procedere a quel modo invece di usare dei bordi

non mi risulta che se a mozilla togli il min-height a contenitore e lasci solo l'height , contenuto non prenda la percentuale

semmai poi allungandosi oltre la pagina contenuto, contenitore non lo segue più, per farlo seguire si può aggiungere a contenitore display:table, ma così poi sballa opera

Discussione: altezza 100%

Strumenti discussione

Ricerca discussione

Visualizza

altezza 100%

Permessi di invio