Newsgroup: it.lavoro.professioni.webmaster
Titolo: layout liquido e altezza

Ciao a tutti, seguendo le indicazioni dei vari siti sull'argomento 
layout liquido ho realizzato una bella paginetta.
Il problema "grosso" è l'altezza della pagina.
Precedentemente ho realizzato un layout liquido utilizzando le tabelle, 
ma impostando a 100% l'altezza di una cella (quella dei contenuti) mi si 
sballava totalmente la pagina (solo con IE7)
Allora sono passato al layout liquido con i div, ma ora il problema è 
far sì che il layout verticale occupi il 100% della pagina. Naturalmente 
impostare height:100% non fa alcun effetto. L'unica nota positiva è che 
in quest'ultimo caso tutti i browser si comportano in ugual modo.
Ecco il codice:
<html>
<head>
<title>Test</title>
<style type="text/css">
html,body {
   margin: 0;
   padding: 0;
   height:100%
}
body {
   font: 76% Verdana, Arial, Helvetica, sans-serif;
   background-color: #FFFFFF;
}
div#container {
   min-width: 770px;
   min-height: 420px;
   background-color: #00FF00;
   height:100%;
}
div#header {
   height: 73px;
   line-height: 73px;
   padding: 0;
   background-color: #000000;
}
div#sidebar {
   float: left;
   width:225px;
   height:100%;
   padding: 0;
   background-color: #C0C0C0;
   color: #FFFFFF;
}
div#content {
   margin: 0 2% 0 35%;
   position:relative;
   overflow:auto;
}
div#footer {
   clear: left;
   background-color: #808080;
   height:20px;
}
</style>
</head>
<body>
<div id="container">
<!-- INIZIO INTESTAZIONE -->
   <div id="header">
   Ciao ciao
   </div>
<!--  FINE INTESTAZIONE  -->
<!-- INIZIO NAVIGAZIONE -->
   <div id="sidebar">
     &nbsp;
   </div>
<!--  FINE NAVIGAZIONE  -->
<!-- INIZIO CONTENUTO -->
   <div id="content">
   Ciao ciao
   </div>
<!--  FINE CONTENUTO  -->
<!-- INIZIO PIÈ PAGINA -->
   <div id="footer">
   Ciao ciao
   </div>
<!--  FINE PIÈ PAGINA  -->
</div>
</body>
</html>
Se qualcuno sa darmi una mano. In pratica impostare a 100% il menù 
laterale (sidebar) fa sì che l'altezza sia la misura del body e non del 
body meno la somma di header e footer

Niente, me ne sono tornato alle tabelle:
Riposto il parte del codice, perchè ora il problema delle dimensioni è 
risolto, ma firefox interpreta l'overflow a modo suo, non so perchè, ma 
mette sì lo scroll, ma di fatto poi scrolla la pagina e non il div.
Se potrà esservi utile potrei anche pubblicare la pagina.
Come potrete notare ci sono alcune celle vuote che ho utilizzato per far 
comparire lo scroll nel div, se non lo vedete, aggiungetene pure altre.
<!--[if IE 6]>
<style type="text/css">
div#contenuto {
  width:expression(document.body.clientWidth<=779 ? "779px" : "100%");
  height:expression(document.body.clientHeight<=544 ? "544px" : "100%");
  border: 1px solid #FF00FF;
  padding:15px;
  overflow:auto;
}
</style>
<![endif]-->
<style type="text/css">
div#contenuto {
  min-width :779px;
  min-height: 544px;
  max-height: 96%;
  border: 1px solid #FF00FF;
  padding:15px;
  overflow:auto;
}
</style>
<td style="width:100%;height:88%;vertical-align:top;">
  <div id="contenuto">
   <form action="" method="post">
    <table text-align:center;" border="0">
     <tr>
      <td>
       Nome:<br />
       <input type="text" tabindex="1" name="nome" id="nome" />
      </td>
      <td>
       Cognome:<br />
       <input type="text" tabindex="2" name="cognome" id="cognome" />
      </td>
     </tr>
     <tr>
      <td>
       <input type="submit" tabindex="13" value="Registra" />
       <input type="reset" tabindex="14" value="Cancella" />
      </td>
     </tr>
     <tr>
      <td colspan="2" align="center">&nbsp;</td>
     </tr>
     <tr>
      <td colspan="2" align="center">&nbsp;</td>
     </tr>
     <tr>
      <td colspan="2" align="center">&nbsp;</td>
     </tr>
     <tr>
      <td colspan="2" align="center">&nbsp;</td>
     </tr>
     <tr>
      <td colspan="2" align="center">&nbsp;</td>
     </tr>
     <tr>
      <td colspan="2" align="center">&nbsp;</td>
     </tr>
    </table>
   </form>
  </div>
</td>