Div con altezza 100% ma che non si allungano

**debug** · 31-07-2007, 01:22

CSS:

codice:

html {
	width: 100%;
	height: 100%;
	font-size: 100%;
}
body {
	width: 100%;
	height: 100%;
	font-family: "Trebuchet MS", Georgia, Verdana, "Times New Roman";
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	background-color: #2B3271;
	margin: 0px;
	padding: 0px;
}
#colonnona {
	width: 614px;
	height: 100%;
	text-align: center;
	position: relative;
	margin: 0 auto;
	top: 0px;
	bottom: 0;
	left: 0px;
}
#colsx {
	float: left;
	width: 17px;
	height: 100%;
	background-image: url(img/bg_col_sx.gif);
	background-repeat: repeat-y;
	position: relative;
}
#colcx {
	float: left;
	width: 580px;
	height: 100%;
	position: relative;
	background-color: #22275B;
}
#coldx {
	float: right;
	width: 17px;
	height: 100%;
	background-image: url(img/bg_col_dx.gif);
	background-repeat: repeat-y;
	position: relative;
}

HTML:

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" lang="it">
......
<body>
<div id="colonnona" align="center">

<div id="colsx">a</div>

<div id="colcx">b</div>

<div id="coldx">c</div>

</div>
</body>
</html>

Seguendo qualche discussione qui nel forum ho trovato questa soluzione per poter realizzare delle colonne laterali ad altezza 100% della pagina, solo ceh pensavo che si allungassero automaticamente all'allungamento dei contenuti, ma questo non avviene.

Sbaglio qualcosa?
Ho capito male io e ciò che vorrei realizzare non è possibile?

Ciaoooooo!!!!!!!

**Myaku** · 31-07-2007, 07:39

mettici intanto il clear, poi ne riparliamo

**Mich_** · 31-07-2007, 10:09

height 100% vuol dire la stessa altezza del blocco contenitore. Per il blocco <html> vuol dire l'altezza della finestra (non di piu`).

Dato che le tue colonne sono fisse, per fare quello che chiedi, puoi usare il trucco delle "false colonne" (in inglese: "faux columns").
Trovi riferimenti nei post vecchi (usa la ricerca), nei "link utili", in rete.

Se l'altezza puo` essere inferiore alla finestra, mettici anche un min-height: 100% (con l'hack per IE):
min-height: 100%;
height: auto :important;
height: 100%;

**debug** · 31-07-2007, 10:32

Originariamente inviato da Myaku
mettici intanto il clear, poi ne riparliamo

In che modo? Non l'ho mai usato

Mich_, cercato e trovato (conoscevo la tecnica ma non sapevo che si chiamassero false colonne)

Grazie.

Ciaoooooooo!!!

**Myaku** · 31-07-2007, 12:59

Originariamente inviato da debug
In che modo? Non l'ho mai usato

quando usi degli elementi con float, per evitare spiacevoli sorprese nella visualizzazione del layout dovresti farli seguire da un elemento che contenga la proprietà clear:
una buona guida ai posizionamenti con i css te lo dovrebbe spiegare più che bene

Discussione: Div con altezza 100% ma che non si allungano

Strumenti discussione

Ricerca discussione

Visualizza

Div con altezza 100% ma che non si allungano

Permessi di invio