Diseño CSS con parte superior e inferior fija, altura variable media

+-------------------+ | Top (fixed) | +-------------------+ | | | | | Middle (fill) | | | | | +-------------------+ | Bottom (fixed) | +-------------------+ 

La parte superior e inferior son divs fijos. Están ubicados en la parte superior e inferior de la ventana del navegador. Quiero que la parte del medio complete el rest de la ventana entre divs superior e inferior.

Si el contenido es más que su altura, entonces puedo usar barras de desplazamiento. Pero su tamaño no debe exceder la ventana.

Mi CSS y HTML:

 html, body, #main { height: 100%; } #content { background: #F63; width: 100%; overflow: auto; height: 100%; margin-bottom: -100px; } #footer { position: fixed; display: block; height: 100px; background: #abcdef; width: 100%; } 
 
xyz

A partir de esto, el pie de página se muestra en la parte inferior, pero el div de contenido sigue ocupando toda la ventana, que debería haber sido la altura [de la ventana-pie de página].

Coloque el div medio usando posicionamiento absoluto sin especificar altura. No es mucho más simple que esto:

 #header { position: fixed; top: 0; left: 0; right: 0; height: 100px; background-color: #abcdef; } #footer { position: fixed; bottom: 0; left: 0; right: 0; height: 100px; background-color: #abcdef; } #content { position: fixed; top: 100px; bottom: 100px; left: 0; right: 0; background-color: #F63; overflow: auto; } 
  

html

 
  • Hello World!!!
  • Hello World!!!
  • Hello World!!!
  • Hello World!!!
  • Hello World!!!

css

  body { margin: 0;} #main{ position: absolute; width: 100%; top: 0; bottom: 0;} #header { position: absolute; height: 41px; top: 0; left: 0; right: 0; text-align:center; display:block; background: blue; } #content { position: absolute; top: 41px; bottom: 0; left: 0; right: 0; overflow:scroll; } #footer { position: absolute; height: 41px; bottom: 0; left: 0; right: 0; text-align:center; display:block; background: blue; } li{ text-decoration: none; display: block; height: 20px; width: 100%; padding: 20px; } 

Demostración de JSFIDDLE

Creo que esto es lo que quieres …

JSBin: http://jsbin.com/ebilag/1/

CSS:

 html, body { top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } .top { position: fixed; top: 0; width: 100%; height: 100px; background: yellow; } .bottom { position: fixed; bottom: 0; width: 100%; height: 100px; background: grey; } .middle { padding-top: 100px; padding-bottom: 100px } 

HTML:

 
Top
Middle
Bottom

Si conoce la altura del encabezado y el pie de página …

entonces podrías hacer esto fácilmente con la propiedad de box-sizing .

Al igual que:

FIDDLE1 FIDDLE2

 .container { height: 100%; background: pink; margin: -64px 0; padding: 64px 0; -moz-box-sizing: border-box; box-sizing: border-box; } .content { overflow:auto; height:100%; } header { height: 64px; background: purple; position: relative; z-index:1; } footer { height: 64px; background: gray; position: relative; z-index:1; } 

La solución con top and bottom padding está bien, pero sugeriría un enfoque diferente donde el marco principal está diseñado como table . Esto es más flexible y puedes ocultar la cabeza o el pie sin cambiar el CSS.

STYLUS (CSS):

 html, body height: 100% .container display: table height: 100% .head, .foot, .content display: table-row box-sizing: border-box .head, .foot height: 70px background: #ff0000 .content overflow: auto .scroll height: 100% overflow: auto box-sizing: border-box 

HTML:

 
...
...
...

Si no conoce los tamaños de encabezado o pie de página y puede usar CSS3, le sugiero que utilice el diseño de flexbox.

Ejemplo a continuación (o verifique el violín )

HTML:

 
header
content

CSS:

 .container { display: flex; flex-direction: column; width: 100%; height: 400px; } .header { flex-grow: 0; background-color: red; } .content { flex-grow: 1; background-color: green; } .footer { flex-grow: 0; background-color: blue; } 

HTML:

 
I am the Content

CSS:

 #main{width:100%;height:100%;} #header { position:relative; text-align:center; display:block; background:#abcdef; height:40px; width:100%; } #content { background: #F63; width:100%; text-align:center; height:auto; min-height:400px; } #footer { position:relative; text-align:center; display:block; background:#abcdef; height:40px; width:100%; } 

MANIFESTACIÓN

En mi opinión, debería usar js / jquery para cambiar el alto de contenido # durante la carga de la página. Esto debería ser algo como esto (no he probado el código a continuación, así que cámbielo según lo necesite):

 $().ready(function(){ var fullHeight= function(){ var h=$(window).height()-100; //100 is a footer height $('#content').css('min-height',h+'px'); }; $(window).resize(fullHeight); fullHeight(); }); 

Por favor intente esto:

HTML

  
main content

CSS

 html,body{ marign: 0; padding: 0; height: 100%; } #header { height: 100px; position: fixed; top: 0; left:0; right: 0; background: orange; } #footer { height: 100px; position: fixed; bottom: 0; left: 0; right: 0; background: green; } #content { padding-top: 100px; padding-bottom: 100px; height: -webkit-calc(100% - 200px); height: -moz-calc(100% - 200px); height: -ms-calc(100% - 200px); height; -o-calc(100% - 200px); height: calc(100% - 200px); background: #ccc; } 

por favor mira la demostración .