box dentro box ed height

**colamart** · 01-02-2005, 22:36

questo è il codice...

codice:

html {
	height: 100%;
}
body {
	padding:0px;
	margin:0px;
	height:100%;
}
#box1 {
	position:relative;
	width:100%;
	min-height:100%;
	height:auto!important;
	height:100%;
	background:#CCCCCC;
}
#box2 {
	height:auto!important;
	height:50%;
	background:red;
	min-height:50%;	
}

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
@import url("prova.css");
</style>
</head>
<body>
<div id="box1">
	<div id="box2">testo prova
	
	</div>
</div>
</body>
</html>

perchè con mozzilla il box2 non occupa il 50% dello spazio dentro il box1? come posso fare?
inoltre mi spiegate cosa vuol dire !important che penso di non averlo capito?
grazie mille

**pacovox** · 02-02-2005, 02:33

perchè con mozzilla il box2 non occupa il 50% dello spazio dentro il box1? come posso fare?

Togliendo height:auto!important; da #box1 sembra funzionare.
Effettivamente height:auto!important; ha sicuramente senso se l'altezza è fissa in px, probabilmente con height:100% è superfluo e in quel caso crea qualche problema all'elemento figlio.

**colamart** · 02-02-2005, 09:49

a cosa serve

height:auto!important;?

grazie

**pacovox** · 02-02-2005, 10:13

a cosa serve height:auto!important;?

Serve per dare priorità ad una dichiarazione.
Viene utilizzato maggiormente come "trucco" per IE, come nel caso del min-height non supportato dal browser microsoft.

codice:

#box{
min-height:300px; /* IE non lo supporta */
height:auto!important; /* Per i browser che supportano min-height, è prioritaria rispetto alla prossima dichiarazione */
height:300px; /* La vede solo IE che in ogni caso interpreta height come fosse min-height */
}

In questo caso quindi sfruttando due bug di IE(!important ed height) si riesce a far capire ad IE che deve dare un'altezza minima di 300px all'elemento.
Nel tuo caso però con height:100% credo sia superfluo, in quanto anche Mozilla Firefox Opera sembra adattino l'altezza all'aumentare dei contenuti.

In conclusione però non credo che lo scopo originario di !important sia quello di "imbrogliare" IE, anche se sinceramente non ne vedo un'ulteriore utilizzo diciamo così, più nobile.

Discussione: box dentro box ed height

Strumenti discussione

Ricerca discussione

Visualizza

box dentro box ed height

Permessi di invio