CSS - Hacer que un div consuma todo el espacio disponible

Question

Todo,

Tengo una página que se supone que ocupa solo el espacio de pantalla disponible en el navegador.

Tengo una 'barra superior' y una 'barra inferior', las cuales están fijadas en la parte superior e inferior de la página. Quiero tener un div que consumirá (tomará) el espacio restante entre las dos barras mencionadas anteriormente.

Su crucial que el div media no es solapado por las barras superior e inferior. ¿Es esto posible con CSS o necesito hacer uso de js?

Además, si voy con js, considerando que el navegador carga el CSS primero antes que el código js, ​​¿cómo funciona lo anterior usando js para el posicionamiento central?

Muchas gracias,

Answer 1

Puede usar las posiciones relative y absolute. Aquí un ejemplo:

css

html,body,#wrapper { 
     height:100%; 
     margin:0; 
     padding:0; 
    } 
    #wrapper { 
     position:relative; 
    } 

    #top, #middle, #bottom { 
     position:absolute; 
    } 

    #top { 
     height:50px; 
     width:100%; 
     background:grey; 
    } 
    #middle { 
     top:50px; 
     bottom:50px; 
     width:100%; 
     background:black; 
    } 
    #bottom { 
     bottom:0; 
     height:50px; 
     width:100%; 
     background:grey; 
    } 

html

<div id="wrapper"> 
    <div id="top"></div> 
    <div id="middle"></div> 
    <div id="bottom"></div> 
</div> 

Demostración:http://jsfiddle.net/jz4rb/4

Answer 2

This demo funciona para mí en Chrome12 pero YMMV dependiendo de qué exploradores que necesita para apoyar. Por ejemplo, position:fixed no funciona correctamente en IE6.

Answer 3

Uso posicionamiento absoluto en la etiqueta body. position:absolute con cero arriba y abajo se "estirará" el cuerpo para que tenga el mismo tamaño que la ventana del navegador. Alternativamente, la configuración height: 100% también funciona, pero recuerdo que funciona de manera extraña para algunos navegadores antiguos.

A continuación, utilice la posición absoluta en el centro div, con suficientes compensaciones superiores/inferiores para evitar las barras de encabezado y pie de página. La barra de encabezado está absolutamente posicionada con top y el fotter está absolutamente posicionado con bottom.

Nota: Esto no funcionará en los navegadores móviles. Deberá usar JS para obtener la altura de la ventana y establecer manualmente la altura del centro de div.