rendere alteza del div elastica

El rumbero · 03-01-2008, 11:13

dentro il tag body ho creato due div uno interno all'altro con larghezza fissa uguale

codice:

#up{
	background-image: url(images/sfondo1.jpg);
	width: 740px; 
	height: 600px;
	border: 0px; 
	margin: 0px;
	padding: 0px;
	}

		#logo{
	background-image: url(images/logohome.jpg);
	background-repeat: repeat-x;
	width: 740px; 
	height: 600px;
	border: 0px; 
	margin: 0px;
	padding: 0px;

}

codice:

<body>

<div id="up">
<div id="logo"></div>
</div>

</body>

l'altezza vorrei renderla elastica a seconda di quanto è alta la finestra del browser.

come è possibile farlo?

**fcaldera** · 03-01-2008, 11:23

body, html, #up { height: 100%; }

El rumbero · 03-01-2008, 11:46

Originariamente inviato da fcaldera
body, html, #up { height: 100%; }

appena inserisco l'unità di misura in percentuale, mi sparisce la visualizzazione del div.

se lo metto su tutte e 4 le classi praticamente ho uno schermo bianco

El rumbero · 03-01-2008, 11:51

mi correggo:

l'unico browser che legge bene è IE6 (forse IE7)

firefox, safari e opera non leggono il height:100%

**fcaldera** · 03-01-2008, 12:27

Di norma i browser interpretano correttamente la regola, probabilmente non ho capito io esattamente cosa vuoi fare: di quale elemento vuoi ottenere un'altezza elastica? Per caso vuoi stretchare l'immagine di sfondo?

El rumbero · 03-01-2008, 12:42

Originariamente inviato da fcaldera
Di norma i browser interpretano correttamente la regola, probabilmente non ho capito io esattamente cosa vuoi fare: di quale elemento vuoi ottenere un'altezza elastica? Per caso vuoi stretchare l'immagine di sfondo?

posto tutto, così renderò tutto più chiaro:

CSS code:

codice:

html { height: 100%; }

body {
	background: white; 
	margin: 0px;
	height: 100%;
}





#up{
	background-image: url(images/sfondo1.jpg);
	width: 740px; 
	height: 100%;
	border: 0px; 
	margin: 0px;
	padding: 0px;
	}

#logo{
	background-image: url(images/logohome.jpg);
	background-repeat: repeat-x;
	width: 740px; 
	height: 600px;
	border: 0px; 
	margin: 0px;
	padding: 0px;
           }

(x)HTML code:

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 name="pippo" content=" prova">
		<link rel="stylesheet" type="text/css" href="stile.css"/>
		
		<title> prova layout </title>
			
	</head>

	<body>
<div align="center">

<div id="up">

<div id="logo"></div>

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

</html>

sfondo1.jpg sarebbe la striscia di 10px che dovrebbe ripetersi fino alla base della pagina sil browser, indifferente dall'altezza delle dimensioni del browser e della dimensione (risoluzione) del monitor.

**fcaldera** · 03-01-2008, 12:51

html e body dovranno avere height al 100% ma è al body che dovrai dare lo sfondo da ripetere fino alla fine. (up e logo possono avere altezza fissa, non necessariamente al 100%)

Discussione: rendere alteza del div elastica

Strumenti discussione

Ricerca discussione

Visualizza

rendere alteza del div elastica

Permessi di invio