Ayuda con el comportamiento de divs

Hola, primero que todo, quisiera agradecer a la gente que publica respuestas dentro del foro, muy prácticas; soy nuevo en el foro y estoy recién entendiendo como funciona.

Les cuento, tengo 3 divs principales, un header, uno central y un footer; tanto el header como el footer deseo que se queden estables, mientras que en el central, se encuentran dos más, el de la izq y el contenido.

Código :

<div id="container">
   <div id="header"></div>
   <div id="central">
      <div id="izq"></div>
      <div id="contenido"></div>
   </div>
   <div id="footer"></div>
</div> <!-- container o contendor -->

El código en CSS está de la manera en que se muestra abajo, sin embargo, tanto el header como el footer se ponen por sobre las dos cajas de central, y lo que se muestra en contenido quisiera que tuviera su scroll dentro del tamaño que variaría según cada resolución de cada navegador/pantalla (¿se entiende eso?)

(Lo explico de otra forma)
Como cada navegador y cada resolución tienen distintos tamaños donde visualiza el sitio, esto que estoy haciendo, es maleable para distintas resoluciones; quedando en tamaños definidos e invariables, el header como el footer, y extendiendo todo lo que tiene el central en el resto de la pantalla (que sería el resto central).

Código CSS

Código :

#container {
   width: auto;
   background-color: black;
   margin: 0;
   }

#header {
   display: block;
   position: fixed; 
   min-width: 960px;
   height: 110px;
   width: 100%;
   background-color: #2e2c30;
   box-shadow: 2px 2px 4px #999;
   margin: 0;
   }

#central {
   margin: 5px 0 0 0;
   width: 100%;
   height: 74%;
   background-color: black;
   }
   
#contenido {
   float: left;
   margin-left: 5px;
   background-color: #2e2c30;
   background: -webkit-gradient(linear, left top, left bottom, from(#2e2c30), to(#161417));
   background: -moz-linear-gradient(left top, left bottom, from(#2e2c30), to(#161417));
   width: 79.5%;
   height: 100%;   
   }
   
#izq    {
   float: left;
   width: 20%;
   height: 100%;
   background-color: #2e2c30;
   background: -webkit-gradient(linear, left top, left bottom, from(#2e2c30), to(#161417));
   background: -moz-linear-gradient(left top, left bottom, from(#2e2c30), to(#161417));
   }
   
#footer {
   top: 91.2%;
   position: fixed;
   display: block;
   width: 100%;
   background-color: #161417;
   margin: 5px 0 0 0;
   height: 52px;
   }

PD: lo copie y pegue, no quité los detalles de background, pensando que hasta eso podría estar fallando en la visualización.

Espero que me puedan ayudar, muchas gracias

Quita el position: fixed; que tienes en #header.

Lo que sucede es que position: fixed saca al elemento del flujo normal de la página y por tanto los que sí están en el flujo se dibujan como si ese otro elemento no estuviera allí.

Tienes el mismo problema con #footer. Pero para solucionarlo deberías decirnos cuál es tu intensión respecto del pie de página, si quieres que se coloque al pie del contenido o al pie de la ventana del navegador. En el primer caso puede que el pie no se vea si el contenido es más alto que el alto de la ventana.

DriverOp escribió:

Sí, bueno... no me expliqué lo suficientemente. La idea es que la pantalla y el navegador no generen un scroll para ver el contenido que sea muy grande, sino que un div tenga scroll en su interior para ir navegando por el contenido, o sea, que el footer se mantenga siempre. Cuando quito el position:fixed; del header y del footer, el footer se oculta detrás del div central y no se puede ver, al header no le pasa nada, se mantiene igual.

Espero haberme dado a entender. Subiré un boceto para que sea más claro.

Ah, bien, ahora se entiende mejor.
Pues prueba poniendo overflow: auto a los divs "izq" y "contenido", eso genera la barra de scroll cuando el contenido excede el alto de los divs.
Pero tienes otro problema. Que le pongas "height: 100%" no hará que el alto sea el espacio restante (de hecho no hace nada), tienes que ponerle un alto explícito en pixels.
Para complicar las cosas quieres que el diseño sea "líquido", es decir, que se redimensione con la ventana manteniendo el aspecto, pero tienes el #header y el #footer con alto fijo (en px), esos elementos no se van a redimensionar.
Y además quieres que #izq y #contenido tengan el mismo alto entre sí...

Bueno, hay que cambiar muchas cosas... Para empezar el documento de entrada debe tener 100% de alto. #container debe tener el alto del documento menos el alto de #footer porque #footer siempre debe estar pegado al pie del documento.
Luego #izq y #contenido deben mantener el mismo alto los dos pero #contenido no debe "invadir" #footer entonces debe hacer scroll cuando el contenido dentro de #contenido sea más alto que el alto de #contenido. Hay que usar un truco ahí.

Código HTML :

<style type="text/css">
html {
   height: 100%; /* El documento al 100% para que abarque toda la ventana */
}   
#container {
   width: auto;
   background-color: #ccc;
   height: 94%; /* Los 6% restantes son para #footer */
   }
#header {
   display: block;
   height: 110px; /* El problemático alto fijo */
   width: 100%;
   background-color: red;
   box-shadow: 2px 2px 4px #999;
   margin: 0;
   }
#central {
   display: table; /* Truco!  :) */
   width: 100%;
   height: 87%; /* El alto de #container menos el alto de #header ... mas o menos */
   background-color: grey;
}
#tlbrow {
   display: table-row;
}
#izq {
   display: table-cell; /* Esto convierte al div en una celda de una tabla...*/
   width: 20%;
   background-color: green;
}
#contenido {
   display: block; /* Truco! :) */
   background-color: blue;
   height: 100%; /* Todo el alto de la tabla, por favor... */ 
   overflow: auto;
} /* #contenido no tiene ancho... porque ocupa lo que deja #izq
#footer {
   top: 94%;
   position: fixed;
   display: block;
   width: 99%; /* Debe poder redimensionarse con la ventana, cierto? */
   background-color: yellow;
   height: 52px; /* El problemático alto fijo */
}
</style>
<div id="container">
   <div id="header"></div>
   <div id="central">
      <div id="tlbrow">
         <div id="izq">
            <p>Div izquierdo</p>
         </div>
         <div id="contenido">
            
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
               <p>Div Contenido</p>
         
         </div>
      </div>
   </div>
   <div id="footer"></div>
</div> <!-- container o contendor -->
</body>
</html>

Dos cosas importantes es que le otorgas el 100% al documento antes de hacer nada más para que los divs sí tengan donde expandirse a lo alto.
El truco de convertir un div en una tabla sirve para que los divs de adentro el navegador los renderise como si fueran celdas de la tabla, entonces toman todos el mismo alto (siempre que estén en la misma fila, de allí que agregué #tlbrow), pero el problema es que las celdas nunca causan overflow y por tanto nunca les aparece una barra de desplazamiento... pero si al menos un div, el que nos interesa, no es una celda entonces la cosa cambia...

Un screenshot de cómo me quedó usando Opera:

http://img340.imageshack.us/i/scrshot20110302.png/