Layout fluido a 3 righe

**abibon** · 21-01-2007, 19:20

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!

**Kreatore** · 21-01-2007, 22:37

Devi assegnare al container altezza 100%, ed all'header e al footer assegni altezza fissa.
Quindi assegni a centrale altezza 100%.

**abibon** · 21-01-2007, 23:24

mmmm...

No, forse mi sono spiegato male io. Il problema è proprio il contrario. Io vorrei header e footer fluidi e centrale con un'altezza fissa...

E cmq se assegno a centrale altezza 100%, la pagina scrolla.

**Kreatore** · 21-01-2007, 23:50

Se assegni a centrale 100% senza assegnare nulla a contenitore è normale che scrolli.
Dovresti assegnare 100% al contenitore, quindi un'altezza fissa al centrale e auto alle altre due. IL problema è che cosi facendo l'altezza dell'header, sew vuoto, sarà pari a 0.

**abibon** · 22-01-2007, 00:10

codice:

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%;
    height: auto;
    bottom: 0%;
    background-image: url(../img/sfondo.png); }
#sopra {
    position: relative;
    margin-bottom: 0px;
    height: 25px;
     }

ho fatto come dici ma non succede nulla. I contenuti sono tutti al minimo e nella parte alta del container. Non occupano tutta l'altezza...

Sia header che footer contengono un'immagine (ho postato l'html nel primo post) quindi non sono a 0... Non occupano più dell'altezza dell'immagine. Anche se il container ha height al 100%.

**Kreatore** · 22-01-2007, 08:53

Come ti ho detto prima, assegnando a head e a foot il valore auto, vanno ad occupare il minor spazion disponibile.
Una soluzione via di mezzo potrebbe essere (vo di ragionamento, non l'ho testata) assegnare a height e a footer un 40% e a center un 20%. Se non ricordo male però la soluzione non è corretta perchè non funziona su IE.

**abibon** · 22-01-2007, 12:21

Così facendo però non ottengo una cosa fluida...

Discussione: Layout fluido a 3 righe

Strumenti discussione

Ricerca discussione

Visualizza

Layout fluido a 3 righe

Permessi di invio