Saludos!
Tengo una página a la que quisiera ponerle un "encabezado" que estuviese siempre visible en la parte de arriba, lo mismo con el "pie" en la parte de abajo y que fuese la capa del cuerpo la única que tuviese la barra de scroll. Hasta ahora tengo esto:
Parte HTML:
Código:
<div id="encabezado"></div>
<div id="cuerpo">AQUI IRIAN MUCHOS DATOS EN FILAS</div>
<div id="pie"></div>
Parte CSS:
Código:
#encabezado {
background-color: Navy;
width: 100%; height: 10px;
}
#cuerpo{
background-color: #009900;
width: 100%;
height: 100%;
overflow: auto;
position: relative;
}
#pie {
background-color: Gray;
width: 100%; height: 10px;
}
Vale, el problema que me surge con esto es que como le doy a la capa del cuerpo un height del 100% y el encabezado y pie ya tienen 10px cada uno pues es como si se "desbordase" y me aparece el scroll de toda la página y además el de la capa cuerpo.
Me gustaría que la altura de esa capa se adecuase al tamaño de la ventana, por eso le doy un 100%, pero claro, tendría que ser un 100% de la altura de la ventana menos 20px (10 del encabezado + 10 del pie). No sé si me estoy explicando bien, o quizá la cosa no vaya por ahí y se pueda solucionar de otra manera.
Espero que alguien me pueda ayudar. Muchas gracias!