div centrale 100%

**Buzzz** · 16-02-2009, 21:37

avevo gia aperto una discussione simile, però questo mi sembra un problema un po diverso dal primo, quindi ho aperto una nuova disc.

in poche parole ho un div in alto e un div in basso (fissati ai rispettivi bordi del browser), poi ho un div centrale (che sta tra questi due div fissi) che deve avere l'altezza uguale allo spazio a disposizione (cioè in base all'altezza dello schermo o del browser) ... volevo sapere cosa mi manca per far si che il div centrale (clearCol) occupi tutto lo spazio libero, perche con il cdice che ho postato con height:100% occupa solo l'altezza del testo, non so se mi spiego...

praticamente sarebbe come avere un layout fluido, solo che la maggiorparte dei siti usano il fluido in modo orizzontale, invece io lo devo avere in modo verticale

ecco il mio codice:

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>CSS: a full page height with 2 columns</title>
<style>
<!--
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
	background:#99FF99;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container {
	position: relative;
    width: 780px;
    height: auto !important;  /* FF2 & IE7 */
    height: 100%;      /* IE5.x & IE6 */
    min-height: 100%;  /* FF2 & IE7 */
    margin: 0 auto;
	background-image: url(container_bg.gif);
}

#header {
	width: 100%;
	height: 190px;
	background-color: #000099;
	/* -----
	   only to highlight text */
	color: #FFFFFF;
	font-size: 20px;
	font-weight: bold;
	/* ---- */
}

#footer {
	position: absolute;
	height: 80px;
	width: 100%;
	bottom: 0;
	background-color: #CC0000;
	/* -----
	   only to highlight text */
	color: #000000;
	font-size: 20px;
	font-weight: bold;
	/* ---- */
}

.clearCol { 
	height: 100%;
	background:#00FF00;
}
-->
</style>
</head>
<body>
<div id="container">
	<div id="header">Header</div>
	<div class="clearCol">--- PROVA ---</div>
	<div id="footer">Footer</div>
</div>
</body>
</html>

grazie in anticipo

**essezeta** · 17-02-2009, 04:34

io metterei header e footer all'interno di clearCol semplificando l'altezza di container in un semplice height: 100% e dovrebbe già andare come base (su FF mi funziona)...

poi aggiusti i bachi degli IE... :berto:

**Buzzz** · 17-02-2009, 08:21

Originariamente inviato da essezeta
io metterei header e footer all'interno di clearCol semplificando l'altezza di container in un semplice height: 100% e dovrebbe già andare come base (su FF mi funziona)...

poi aggiusti i bachi degli IE... :berto:

cioè intendi dire di usare il clearCol come container height:100%, e di inserire header e footer all'interno di esso cosi da eliminare il container?

**Mich_** · 17-02-2009, 10:17

Dato che sono i blocchi principali della pagina, puoi anche arrischiarti ad usare il posizionamento assoluto.

codice:

HTML:
<body>
    <div id="container">
	<div id="header">Header</div>
	<div id="clearCol">

--- PROVA ---</p></div>
	<div id="footer">Footer</div>
    </div>
</body>

CSS:
#container { ... va bene il tuo ... }
#header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 190px;
}

#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 80px;
	width: 100%;
}
#clearCol {
	position: absolute;
	top: 0;
	left: 0;
	margin: 190px 0 80px 0;
}

**essezeta** · 17-02-2009, 14:17

cioè intendi dire di usare il clearCol come container height:100%, e di inserire header e footer all'interno di esso cosi da eliminare il container?

no clearCol diventa contenitore SOLO di header e footer... il markup come ha fatto anche Mich...
<div id="container">
<div class="clearCol">
<div id="header">Header</div>

--- PROVA ---</p>
<div id="footer">Footer</div>
</div>
</div>

e il container così

#container {
position: relative;
width: 780px;
height: 100%;
margin: 0 auto;
background-image: url(container_bg.gif);
}

però quello che dice Mich_ non è sbagliato... anzi è pure meglio...
ciao

**Buzzz** · 17-02-2009, 22:55

ok grazie ad entrambi, doma provo il codice..
comunque volevo sapere una cosa su questi due codici:
se io ho del testo sul div centrale (quello adattabile allo spazio) e ristringo il browser in altezza, il div footer si verma quando il div centrale finisce lo spazio (cioè fino a quando trova il testo poi si ferma) o il div footer si sovrappone al div centrale (sovrapponendo cosi il testo nel div centrale) ??

scusate il giro di parole ma non sapevo come meglio spiegarlo

grazie

**Mich_** · 18-02-2009, 10:19

Originariamente inviato da Buzzz
ok grazie ad entrambi, doma provo il codice..
comunque volevo sapere una cosa su questi due codici:
se io ho del testo sul div centrale (quello adattabile allo spazio) e ristringo il browser in altezza, il div footer si verma quando il div centrale finisce lo spazio (cioè fino a quando trova il testo poi si ferma) o il div footer si sovrappone al div centrale (sovrapponendo cosi il testo nel div centrale) ??

scusate il giro di parole ma non sapevo come meglio spiegarlo

grazie

Credo ti convenga provare il codice e verificare.
Poi se hai problemi posta lo screenshot di quello che ti succede.
Comunque gli attributi che devi cambiare se vuoi fare prove sono le altezze del contenitore (io credo che quelle che hai usato nel tuo #container dovrebbero andare bene, ma puoi provare a togliere un po' di hack - eventualmente prova a togliere TUTTI gli attributi di altezza).

**Buzzz** · 20-02-2009, 17:31

rieccomi

ho preso il codice di Mich_, ho applicato gli sfondi (cosi per vedere le misure del div) ed ho notato che clearCol non misura 100% in altezza.
questo è un problema per me perchè se poi all'interno inserisco una galleria di immagini (flash o javascript) e devo fare in modo che questa si adatti sempre al centro verticale, se non ho un 100% in altezza non posso ottenere questo effetto.

in poche parole: come faccio a dare a clearCol un'altezza 100%?? (l'altezza 100% deve rimanere tra i due div, e con ciò se si ristringe il browser e il footer si alza, clearCol deve ristringersi, rimanendo sempre al 100% in altezza.

se non si capisce (probabile) chiedetemi pure

**essezeta** · 21-02-2009, 16:49

se non si capisce (probabile) chiedetemi pure

e già... mica si capisce troppo...

posta sempre il codice quando chiedi qualcosa... e meglio...

comunque qui ho ancora il test dell'altra volta...
http://www.essezeta.org/help/forum/22/test.html

a me funziona con FF e IE7...

**Buzzz** · 21-02-2009, 17:21

Originariamente inviato da essezeta
e già... mica si capisce troppo...

posta sempre il codice quando chiedi qualcosa... e meglio...

comunque qui ho ancora il test dell'altra volta...
http://www.essezeta.org/help/forum/22/test.html

a me funziona con FF e IE7...

ahn ecco

cercavo una cosa cosi.. mi ero dimenticato che avevo pure questo.
comunque un'ultima cosa, se ristringo il browser, il footer si sovrappone al dic centrale, per bloccare il footer (quando ristringo il browser) dove c'è il testo del div centrale, come faccio? (in questo modo quando il footer arriva al testo del div centrale, appare la "scrollata" a destra del browser)

è possibile invece non far apparire la "scrollata" a destra nel browser e bloccare il ristringimento del browser?

Discussione: div centrale 100%

Strumenti discussione

Ricerca discussione

Visualizza

div centrale 100%

Permessi di invio