Tengo una web con un header y footer que deben quedar visibles todo el tiempo, para lo cual utilizo position:fixed.
En el centro tenemos el contenido y debe añadir una barra de scroll para navegarlo cuando sea necesario.
Mi problema es que el contenido se adapta bien en la parte superior, pero en la parte inferior no, queda contenido oculto. Para que no pase, le di height: 75%, pero obviamente en resoluciones grandes queda muy mal (deja un espacio en blanco debajo).
Si le doy 100%, queda contenido debajo de la capa del footer.
Cómo puedo hacer para que ese div adapte su alto al espacio que queda libre entre header y footer?
Código CSS:
Ver originalhtml, body {
height: 100%;
overflow:hidden;
}
#top-header {
height: 60px;
width: 940px;
padding: 10px 10px 20px 10px;
background-image: url(../images/border-header.png);
background-repeat: repeat-x;
background-position: bottom center;
position: fixed;
top: 0;
}
#content-wrapper {
width: 960px;
position:relative;
top: 100px;
height: 75%;
overflow:auto;
display:block;
margin: 0 0 20px 0;
padding: 30px 0 20px 0;
}
#footer {
position: fixed;
bottom: 0;
width: 960px;
height:45px;
list-style-type:none;
background: white;
border-top: 7px solid #557db8;
}