Как прижать header вверх, footer вниз, а в центральной части сделать scroll

Запись от 08.05.2014

Теги:

Не претендую на уникальность, но шпаргалку такую иметь приходится

HTML:

<body> 
   <div class="wrapper"> 
      <div class="header"></div>
      <div class="middle">  
         <div id="container"></div>
      </div>
      <div class="footer"></div>
   </div>
</body>

CSS:

body {height: 100%;}  
.wrapper {height: 100%;} 
.header {height: 96px;} 
.middle { 
   height: 100%;
   overflow: hidden;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   margin: -96px 0 -102px;
   padding: 96px 0 102px;
   position: relative;
} 
#container {overflow: auto;height: 100%;}
.footer {height: 102px;}

Только нужно помнить задавая margin и padding у .middle, что размеры нужно учитывать вместе с отступами header-а и footer-а.