layout liquido in altezza

**maxcondor** · 26-02-2007, 17:16

si può realizzare un layout con i css in modo completamente fluido sia in altezza che in larghezza?

**Leilond** · 26-02-2007, 17:35

Bhe... certo... o meglio, la tua domanda mi fa sospettare che non ho capito cosa vuoi

**maxcondor** · 26-02-2007, 17:51

un layout liquido che si adatti alla risoluzione video sia il larghezza che in altezza.
Il larghezza non ho problemi in altezza invece non riesco a rendere liquido il div centrale per intenderci quello di colore rosso

**maxcondor** · 27-02-2007, 09:53

, non c'è soluzione?

codice:

<div id="header"></div>
<div id="centro"></div>
<div id="footer></div>

Una struttura del genere non si può rendere liquida anche in altezza?

**mahamatt** · 27-02-2007, 09:59

in teoria basterebbe applicare alle bande blu (footer e header) un valore di height espresso in %...

**maxcondor** · 27-02-2007, 13:18

troppo semplice... non funziona....!!!

**mahamatt** · 27-02-2007, 15:23

Originariamente inviato da maxcondor

troppo semplice... non funziona....!!!

cosa significa?!? come si comportano le bande con i valori in %?
se non ti spieghi, non è possibile aiutarti...

**maxcondor** · 05-03-2007, 12:56

il quesito è molto semplice, basta vedere l'immagine allegata.
Le due bande blu devono posizionarsi in alto e in basso a tutte le risoluzioni.
io ci sto sbattendo la testa ma non riesco a trovare una soluzione

**maxcondor** · 05-03-2007, 16:20

ho risolto così:
codice html:

codice:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="stili/css.css" />
</head>
<body>
<div id="box">
	<div id="header">
		<div>Header</div>
	</div>
	<div id="blocco">
		<div>centro</div>
	</div>
	<div id="footer">
		<div>Footer.</div>
	</div>
</div>
</body>
</html>

ecco il css:

codice:

body {
	margin:0;
	padding:0;
	
	
}
#box{
	width: 100%;
	height: 100%;
    padding: 0;
	margin: 0;
    border: 0;
  	
}

#header { 
	height: 10%;
	background-color: #FF0000;
   	padding: 0;
	margin: 0;
    border: 0px;
		  
}


#blocco { 

	width: 100%; 
	height: 80%;
	background-color: #00FF00;
    padding: 0;
	margin: 0;
    border: 0;	
}



#footer { 

	height: 10%;
	background-color: #FF0000;
    padding: 0;
	margin: 0;
    border: 0;
}

La pagina funziona l'unico neo è che se inserisco la dichiarazione strict del doctype non funziona più... qualcuno mi aiuti a svelare l'arcano...

Discussione: layout liquido in altezza

Strumenti discussione

Ricerca discussione

Visualizza

layout liquido in altezza

Permessi di invio