Semelhante a ideia já postada há esse modo:
body{
margin: 0;
padding: 0;
height: 100%;
padding: 50px 0;
}
header, footer{
height: 50px;
width: 100%;
background: #333;
position: fixed;
}
header{ top: 0;}
footer{ bottom: 0;}
#content{
background: gold;
position: absolute;
width: 100%;
bottom: 50px;
top: 50px;
}
<header></header>
<div id="content"></div>
<footer></footer>
Você atribui ao header
e ao footer
um height
desejado, essa alturas serão usadas mais a frente para se especificar os espaçamento da div#content
para que ela ocupe o espaço restante.
Feito isto, basta atribuir a ambos um position: fixed
, e bottom
e top
.
Com a div#content
tendo um position: absolute
você não necessita especificar o height
e sim o top
e bottom
, sendo estes a altura do header
e do footer
, respectivamente. Assim o height
desta div
será automático. Caso queira um conteúdo com barra de rolagem, basta dar um overflow: auto
.