altezza al 100%

**neo2k** · 26-04-2004, 19:08

Salve a tutti, premetto che in questo tipo di impaginazione sto facendo un po' di prove e sono neofita a riguardo... ma non riesco a cavare le gambe dal problema: ho provato a creare l'impaginazione come segue, ma le tre colonne sotto la header con questo codice non c'e' verso di farle arrivare al 100%. Qualcuno saprebbe dirmi dove sbaglio?

ho provato anche con il min-height, ma il risultato e' la somma dei pixel della header e del menu + il 100% delle 3 colonne (risultato: scrollbar laterale).

codice:

<style type="text/css">
		html,body{margin: 0;padding:0;height:100%;}

		#container {
		    position:relative;
			width: 760px; /* Dimensioni per Opera 5 */
			\width: 760px; /* Dimensioni per Explorer 5.x si aggiungono i pixel del padding su entrambi i lati*/
			w\idth: 760px; /* Dimensioni per browser standard compliant */
			height: auto;
			min-height: 100%;
			margin: 0px;
			margin-left: auto;
			margin-right: auto;
			
		}
	
		
		#header {
			background-image: url(immagini/sf_top_rosso.gif);
			background-repeat: no-repeat;
			height: 100px;
			width: 760px;
		}
		
		#menu {
			background-image: url(immagini/sf_menu_azzurro.gif);
			background-repeat: repeat-x;
			height: 23px;
			width: 760px;
			position: absolute;
			top: 100px;
		}
		
			#colsx {
				background-image: url(immagini/sf_sx.gif);
				background-repeat: repeat-y;
				height: 100%;
				width: 122px;
				top: 123px;
				position: absolute;
				padding: 3px;
		}
		
			#coldx {
				background-image: url(immagini/sf_dx.gif);
				background-repeat: repeat-y;
				height: 100%;
				width: 153px;
				top: 123px;
				left: 607px;
				position: absolute;
				padding: 3px;
		}
		
			#main {
				height: 100%;
				width: 122px;
				top: 123px;
				left: 122px;
				position: absolute;
				padding: 3px;
		}
		
		</style>

**Jerry Masslo** · 27-04-2004, 16:45

non ti seccare, ma se posti pure lo xhtml si risparmiano un po' di operazioni noiose.

**neo2k** · 27-04-2004, 16:57

Ciao
rispetto a ieri e' un po' cambiato....ma il risultato rimane lo stesso...le colonne laterali non crescono...

grazie

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

	<style type="text/css">

html, body {
				height: 100%;
			}
	
	body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}

#container {
			position: relative;
			min-height: 100%;
			height: 100%;
			width: 760px;
			voice-family: "\"}\"";
			voice-family: inherit;
			height: auto;
			margin-left: auto;
			margin-right: auto;

}

html>body #container {
				height: auto;
			}
#header {
		width: 760px;
		height: 100px;
    	top: 0;
		background-image: url(immagini/sf_top_rosso.gif);
		background-repeat: no-repeat;

		 
		 }
		 
#menu{
		width: 760;
		height: 23px;
		top: 100;
		background-image: url(immagini/sf_menu_azzurro.gif);
		background-repeat: repeat-x;
		padding:3px;
		 }
		 
		  
#colsx{
        position:absolute;
		width: 122px;
		height: 100%;
		top: 123px;
		background-image: url(immagini/sf_sx.gif);
		background-repeat: repeat-y;
		padding:3px;
		 }
		 	
	
			  
#coldx{
		position: absolute;
		width: 153px;
		height: 100%;
		top: 123px;
		left: 607px;
		background-image: url(immagini/sf_dx.gif);
		background-repeat: repeat-y;
		padding:3px;
		 }

	</style>
	
</head>

<body>
<div id="container">
	<div id="header">  </div>
	<div id="menu" class="testo">Menù</div>
	<div id="colsx">colonna sinistra</div>
	<div id="coldx">
		colonna destra	
    </div>

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

**Jerry Masslo** · 27-04-2004, 17:23

html, body {
height: 100%;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}

#container {
position: relative;
height: 100%;
width: 760px;
margin-left: auto;
margin-right: auto;
}

#header {
width: 760px;
height: 20%;
top: 0;
background-image: url(immagini/sf_top_rosso.gif);
background-repeat: no-repeat;
background:silver

}

#menu{
width: 760;
height: 5%;
background-image: url(immagini/sf_menu_azzurro.gif);
background-repeat: repeat-x;
padding:3px;
background:maroon
}

#colsx{
position:absolute;
width: 122px;
height: 77%;
top: 23%;
background-image: url(immagini/sf_sx.gif);
background-repeat: repeat-y;
background:yellow
}

#coldx{
position: absolute;
width: 153px;
height: 77%;
top: 23%;
left: 607px;
background-image: url(immagini/sf_dx.gif);
background-repeat: repeat-y;
background:red
}

prova questo, ho messo un background perchè altrimenti non vedevo niente.

Discussione: altezza al 100%

Strumenti discussione

Ricerca discussione

Visualizza

altezza al 100%

Permessi di invio