altezza DIV

[dvdzero]

Sto muovendo i primi passi con CSS e mi sono subito imbattuto in difficolta` circa la visualizzazione sui vari browser (ho preso in esame solamente Firefox e Explorer).
I miei problemi riguardano + che altro le dimensioni di border e paddind dei div che Explorer tratta in maniera totalmente differente da Firefox ... pazienza per questo penso di poter ovviare con uno switch sui .css.
Quello che non sono riuscito a risolvere/capire e` perche` firefox non accetta l'indicazione dell'altezza di un DIV al 100%. Impostando in questo modo l'altezza rimane la minima sufficente per contenere tutto il testo.

qualcuno puo` farmi luce?
grazie

[Mich_]

Format C:
E ricaricamento del sistema operativo

A parte gli scherzi, ho l'impressione che stai affrontando il problema dal lato piu` ostico.

Parti da come si fa in FireFox, poi utilizza gli hack per IE.
La cosa consigliata recentemente e` l'utilizzo dei commenti condizionali:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

La prima riga puo` essere anche:
<!--[if lte IE 5.5]> CSS specifico per IE 5.0 e 5.5
<!--[if IE 6]> CSS per IE 6
<!--[if IE 7]> CSS per IE 7


L'altezza 100% viene riconosciuta, ma occorre definire ilbox rispetto a cui viene definita l'altezza.
In parole povere, per avere un box alto 100%, occorre che sia l'oggetto html che il body abbiano un'altezza definita (ad esempio 100%).

[dvdzero]

Originariamente inviato da Mich_
per avere un box alto 100%, occorre che sia l'oggetto html che il body abbiano un'altezza definita (ad esempio 100%).

scusa ... non mi e` del tutto chiaro potresti spiegarmi meglio?
grazie

[stedolphin]

Provo a risponderti io ... da quello che capisco dovresti inserire qualcosa del genere ...

html {
	height: 100%;
	}

body {
	height: 100%;
	}

Solo che in questo caso, se ad esempio io volessi che il DIV rimanesse "staccato" dal top e dal bottom di 10px ... come devo procedere ???
Se metto ad esempio 80%, non va bene perché non è una dimensione di margin fissa ...

[andrea.paiola]

Originariamente inviato da dvdzero
scusa ... non mi e` del tutto chiaro potresti spiegarmi meglio?
grazie

Le dimensioni percentuali sono relative al contenitore percui devi dare 100% anche ad html e body visto che sono i contenitore

[Mich_]

Originariamente inviato da stedolphin
Solo che in questo caso, se ad esempio io volessi che il DIV rimanesse "staccato" dal top e dal bottom di 10px ... come devo procedere ???
Se metto ad esempio 80%, non va bene perché non è una dimensione di margin fissa ...

html, body {
  height 100%;
}
#content {
  height: 80%
  margin: auto 0;
}

oppure:

html, body {
  height 100%;
  width: 100%;
}
#content {
  height: 80%
  width: 80%;
  margin: auto;
}

[stedolphin]

Grazie Mich_

avevo pensato anche io a quella soluzione ... però

80% di 1000px è appunto 800px e quindi ne ho 100 sopra e 100 sotto ...

80% di 200px è 160px e qundi in questo caso avrei i miei famosi 20px sopra e 20px sotto ...

Se io voglio invece avere sempre e comunque 20px ??? Non posso usare la percentuale ... In questo caso che fare ???

GRAZIE ...

[Mich_]

margin: 20px 0;
e non definire l'altezza del #content: sara` definita dal browser in base al contenitore (che dovra` comunque avere un'altezza definita) ed ai margini.

[stedolphin]

Eccomi ... ho provato ma ...

html {
	height: 100%;
	}

body {
	background-image: url(bground.gif);
	height: 100%;
	}
	
#Container {
	width: 700px;
	border-left: 1px solid #6666ff;
	border-right: 1px solid #6666ff;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	}

Il risultato però è questo ... Test 20px tra le altre cose non capisco perchè mi è sparito il bordo colorato che c'era qui invece ... Test Bordo ...o meglio è sparito solo con Firefox ...

[Mich_]

Dovresti anche provare a metterci dentro qualcosa: un

con delle scritte al minimo.
Perche` un <div> vuoto puo` anche non venir visualizzaato.
(lo so che nel tuo c'e` un \n, ma mi sembra poco, soprattutto per poter apprezzare i bordi).