Ciao a tutti,

ecco il mio problema.

Ho una pagina con una colonna al centro larga 770px e alta 100%.

Questa colonna è divisa in "header", "centrale" e "footer". Tutti hanno larghezza 770px. L'altezza invece vorrei fosse dichiarata solo quella di "centrale" e che "header" e "footer" si ridimensionassero in modo uguale per occupare sempre tutta l'altezza della pagina.

Un po' quello che si faceva con le tabelle dando altezza 100% alla tabella e dichiarando l'altezza solo della riga in mezzo.

Come si può fare?

Posto il codice:

codice:
HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Prova</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/default.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="container">
<div id="header">[img]img/barra.png[/img]</div>
<div id="centrale">ceb</div>
<div id="footer">[img]img/barra_s.png[/img]</div>
</div>
</body>
</html>

CSS:

body {
    background-color: #400904;
    margin:0;
    padding:0;
    overflow-y:hidden;
    scrollbar-3dlight-color: #C0C0C0; 
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-base-color: grey; 
    scrollbar-darkshadow-color: #6D658C; 
    scrollbar-face-color: grey; 
    scrollbar-highlight-color: #FFFFFF; 
    scrollbar-shadow-color: #6D658C;
    scrollbar-track-color: #7B7B7; }
#container {
    background-color: #FFFFFF;
    height: 100%;
    width: 770px;
    border-left: solid 1px #A35852; 
    border-right: solid 1px #A35852; 
    border-collapse: collapse;
    position:relative;
    left:50%;
    margin:0 0 0 -385px; }
#header {
    display:block;
    background-image: url(../img/sfondo.png);
    width: 770px;
    height: auto;
    position:relative;
    margin:0;
    clear: both; }
#centrale {
    width: 770px;
    height: 50px;
    position:relative;
    clear: both; }
#footer {
    margin:0 0 0 0px;
    padding-bottom: 10px;
    clear: both;
    left: 0%;
    width: 100%;
    bottom: 0%;
    background-image: url(../img/sfondo.png); }
#sopra {
    position:relative;
    margin-bottom:0px;
 height: 25px; }
Grazie!