CSS Sticky Footer cuando el contenido no ocupa toda la página

Tengo dos páginas que solo se diferencian por el contenido de la etiqueta div del cuadro de contenido . Puedes verlos aquí:

Versión alta

Version corta

He incluido el código html / css para la versión corta a continuación. Me gustaría que se muestre la versión corta , de modo que si la cantidad de contenido no llena toda la página, el pie de página aún se pegará al final Y toda el área entre el encabezado y el pie de página en el centro de la pantalla es blanco correspondiente al cuadro de contenido div.

¿Qué necesito cambiar para lograr esto?

Actualización 1 Hice una nueva página haciendo lo que @smallworld sugirió. Se puede ver aquí . Esto tiene un pie de página adhesivo, pero me gustaría que el cuadro “contenedor” externo extienda la altura de la página.

     #main { width: 100%; min-height: 100%; height: 100%; } body { width: 100%; } #header,#content { position:relative; right:0;left:0} #header{ height:75px; top:0; background: #4396CA; } #footer{ width: 100%; position: relative; height:50px; bottom: 0; left: 0; background: #4396CA; } #content{ top:00px; background: #F0F8FF; min-height: 100%; height: 100%; } #content-box { width: 950px; margin: 0 auto; background-color: #FFFFFF; text-align: left; border-right: 1px solid #B0B0B0; border-left: 1px solid #B0B0B0; padding-bottom: 20px; padding-top: 20px; min-height: 100%; height: 100%; }  EmbeddedAnalytics - Test Page   
Content does not take up all of box. But still want footer to "stick" to bottom
line1
line2
line3
Last Line

EDITAR: Ver jsfiddle en http://jsfiddle.net/smallworld/gcpNh/ – He usado class = “xyz” en lugar de usar id = “xyz” en tu ejemplo. Sé que estirar al 100% de altura no debería ser tan difícil y estresante, pero en realidad lo es. Siento tu dolor y es por eso que bash ayudar tanto como puedo. Hice una corrección más: debería haber sido el fondo de relleno, no el margen inferior en la clase “principal”.

CSS:

 html { height:100%;min-height:100% !important;margin:0;padding:0; /** see height, min-height values here. **/ } body{ overflow:auto;padding:0;margin:0;height:100%;min-height:100% !important; /** see height, min-height values here. **/ } .main { position:relative;min-height:100%; height:auto; background:cyan; /** see position, height, min-height values here. Height auto to make sure that main div resizes if window size changes after initial rendering **/ } .header { display:block;height:50px;position:relative;background:yellow;text-align:center;padding:10px; } .content { padding:20px;margin-bottom:50px; /** bottom margin here to make sure that footer does not cover the content area **/ } .footer { display:block;position:absolute;bottom:0;left:0;width:100%;height:50px;background:red;color:white;text-align:center;padding:10px; /** see position, top, left, and width properties here. **/ } 

HTML

 
header

Goal of this fiddle is to demonstrate sticky footer implementation

And domonstrate this with least amount of CSS and HTML, without using any extraordinary hacks.

Your content goes in here. Add lot more content, and resize browser window to several different sizes to see how your page is rendered as compared to with very little content.