Layout de 3 filas - header+footer+contenidos elásticos con scroll

Basado en http://jsfiddle.net/5V288/7/

by jrdiaz

HTML

<body>
    <div id="header" class="BSBB">Header</div>
    <div id="content" class="BSBB">
        <div class="scrollableContent" >
            <div class="P10">
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
            </div>
        </div>
    </div>
    <div id="footer" class="BSBB">Footer</div>
</body>

CSS

.BSBB { box-sizing: border-box;  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  -ms-box-sizing: border-box; }
.P10 { padding: 10px; }
.B { border: 1px solid red; }

/* 100% height */
html, body {
    overflow: inherit; /* triggers 100% height in Opera 9.5 */
    height: 100%; /* gives layout 100% height */
    min-height: 100%;
    position:relative;
}
.wrapper { min-height: 100%; /* gives layout 100% height */ }
* html .wrapper { height: 100%; /* IE6 treats height as min-height */ }

/* Layout */
/* El padding en el contenido estropea el scroll salvo que se haga en un div interior */
#header  { position:absolute; width:100%; height:50px; left:0px; top:0px;    }
#footer  { position:absolute; width:100%; height:50px; left:0px; bottom:0px; }
#content { height:100%; overflow: hidden; padding: 50px 0; /* Alto del header y el footer! */ }
#content .scrollableContent { height: 100%; width: 100%; overflow: auto; }

/* Apariencia */
body { background: #FFF; color: #FFFFFF; }
#header { background: #CCCCCC; padding: 10px; }
#footer { background: #CCCCCC; padding: 10px; }
#content { background: green; }