Lo que busca realizar se conoce como pie abajo y cuerpo con altura 100%.
Son dos estructuras en una.
Aquí le dejo una vieja realización para que contraste el css con el que usted utiliza y adapte el marcado html a sus necesidades:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es"> <title>Kseso?: Pie abajo 2 Jugando con css
</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> * {
margin:0;
outline:0 none;
padding:0;
position: relative;
}
html, body {
font-size:1em;
height:100%;
width:100%;
font-size: 1em;
font-family:georgia,serif;
background: #CD3335;
font-style:italic;
}
#contenedor {
height:auto !important;
min-height:100%;
height:100%;
/*min-width: 800px; colocar los equivalentes para los ie*/
overflow:hidden;
}
#cabecera {
background:#0060F0;
height:3em;
text-align:center;
z-index: 10;
-moz-box-shadow: 0 0 5px #444;
-webkit-box-shadow: 0 0 5px #444;
-o-box-shadow: 0 0 5px #444;
}
#contenido {
background: #FF9966;
width:70%;
margin:0 auto -1500px auto;
padding:0 0 1500px 0;
overflow: hidden;
}
.corte {
clear:both;
padding-top:3em;
}
#pie {
background:#00C0F0;
color:#FFFFFF;
height: auto!important;
min-height:3em; /*colocar los equivalentes para los ie*/
height: 3em;
margin-top:-3em;
text-align:center;
width: 100%;
}
Pero es sólo una forma de conseguirlo. Si hace una búsqueda, seguro que halla otra formas de conseguir lo mismo.
P.D.: los códigos están sin limpiar al 100%, ya que como le digo, es una antigua realización que contemplaba ciertas premisas. Así que seguramente más de una declaración esté de más.