div con altezza 100%

**6sic6** · 04-06-2008, 16:35

ciao a tutti
la mia pagina html ha questa struttura

codice:

<body>
<div id="containerPt">
	<div id="header"></div>
	<div id="menu"></div>
	<div id="content">
		<form id="...>
		</form>
	</div>
	<div id="footer"></div>
</div>
</body>

il mio css contiene qs

codice:

html,body {
	margin:0;
	padding:0;
	height:100%; 
}

div#containerPt {
	position: relative;
	margin: 0 auto;
	height: auto !important;
	height: 100%;
	min-height: 100%;
}

div#header {
}

div#menu {
	padding: 0px 0px 5px;;
}

div#content {
	padding: 0px 0px 50px;
	height: 100%;
}

div#footer {
	position: absolute;
	width: 100%;
	bottom: 0;
}

il footer e' alto 50px e sta sempre in fondo alla pagina
ora ho bisogno di impostare il div con id 'content' con altezza 100%
ho provato impostando height:100% nel content ma nulla
la dimensione massima del div e' sempre data dagli elementi che contiene e nn viene impostata al 100%.
Come faccio a far espandere il mio content div fino in fondo alla pagina?
thanks guys

**Ht28** · 04-06-2008, 22:18

Dagli una misura fissa es:

div#content {
padding: 0px 0px 50px;
height: 1000px;

**6sic6** · 05-06-2008, 11:32

il problema e' li
la dimensione del content non deve essere sempre height: 1000px; ma dev essere il 100% dell altezza del browser
se la pagina contiene 2 righe e ho altezza 1000px con una finestra di un browser rimpicciolita avro' una scrollbar per scrollare il nulla

**6sic6** · 06-06-2008, 16:00

dando il 100% prende la dim del body al 100% che e' la dim massima della finestra.. quindi ho sempre la scrollbar visualizzata sulla dx

**Ht28** · 06-06-2008, 18:29

Originariamente inviato da 6sic6
dando il 100% prende la dim del body al 100% che e' la dim massima della finestra.. quindi ho sempre la scrollbar visualizzata sulla dx

Prova a mettere <scrolling="no">

**6sic6** · 09-06-2008, 11:58

ciao
il problema nn e' la scrollbar visualizzata oppure no. il contenuto dev'essere DINAMICO.. il che vuol dire che nn voglio dare un'altezza fissa al div
voglio che si adatti alla dimensione della finestra del browser.. ho cercato abbastanza in giro e non c'e' verso a quanto ho capito

**essezeta** · 09-06-2008, 17:55

si può fare... secondo me non è una gran bella soluzione, ma si può fare...

Salva il codice che segue come nome.html e aprilo sul browser... troverai ciò che cerchi...

codice:

<html>
<head>
<title>Sono un div alto il 100% della tua finestra</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* occhio a questa regola! */
}
#centoxcento {
position:absolute;
right:50%;
top:0;
width:200px;
height:100%; /* funziona solo se prima lo hai assegnato al parent */
background:#ff0000;
}
p {padding:1em;}
</style>
</head>

<body>
<div id="centoxcento">


ciao sono un div di sfondo rosso e sono alto il 100% della tua finestra</p>
</div>

</body>
</html>

ho cercato abbastanza in giro e non c'e' verso a quanto ho capito

ragazzuoli, ma come le fate le ricerche su guuuugle??? io ho ritrovato in due battute l'originale del mio esempio che a suo tempo avevo salvato e personalizzato...

Ecco quindi anche la fonte originale del mio esempio:
CSS 100% Height DIV's tutorial - Here is how to assign 100% height for your CSS divs!

buonlavoro

**nickt** · 09-06-2008, 21:30

Hai provato a mettere height: auto !important;?

**6sic6** · 18-06-2008, 12:29

essezeta penso di saper cercare in google
il problema non e' far prendere l altezza del 100% a un semplice div in una pagina, x quello nn penso d avere problemi.
Il problema sorge quando hai una struttura della pagina + complessa come quella che ho descritto qui sopra.
questo e' quello che ho io +o- ma il problema e' che nn hai il controllo sul menu.
http://www.strictlycss.com/examples/...-columns-1.asp
nel senso in questo caso i rombi sono disegnati come background.. io vorrei li dentro un div che si adatta al 100% di altezza tra header e footer.. a quanto ho capito e' impossibile da ottenere.

**mucu** · 18-06-2008, 12:33

prova qui

Discussione: div con altezza 100%

Strumenti discussione

Ricerca discussione

Visualizza

div con altezza 100%

Permessi di invio