html - Layout viewport with fixed height using divs tags -

i try create layout "viewport" fixed heigh top, fixed height footer, , middle part remaining height. need using div tags. here's happened

html:

<div class="table-cui-a2c"> <div class="row-cui-a2c" style="height: 50px;">     <div class="cell-cui-a2c">     </div> </div> <div class="row-cui-a2c" >     <div class="cell-cui-a2c" >         <div class="block" ></div>     </div> </div> <div class="row-cui-a2c" style="height: 50px;">     <div class="cell-cui-a2c">     </div> </div> 

css:

html {display:block; position:static; width:100%; height:100%; margin:0px; padding:0px; border:none; overflow:hidden;} body {font-family:helvetica, "open sans", "helvetica neue", helvetica, arial, sans-serif; font-size:14px; width:100%; height:100%; font-weight:300; padding:0px; margin:0px;}  html * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}  .table-cui-a2c {display:table; width:100%; height:100%;} .row-cui-a2c {display:table-row; width:100%; height:100%;} .cell-cui-a2c {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted black; overflow:scroll;}  .block {display:block; width:100%; height:200%; background:#d0d0d0; border:1px dashed red;} 

http://jsfiddle.net/roskoshinsky/htv2bq1q/

i expect central part of vertical-scroll. did not happen. moreover, see wrong mapping in firefox.

how solve problem?

if not misunderstand should solve problem

html, body{      margin: 0;      padding: 0;  }    .fixed-top{    height: 50px;    background-color: #5cb85c;  }    .fluid-center{    height: calc(100vh - 150px);/*using viewport units*/    background-color: indianred;    overflow: auto;  }    .fixed-bottom{    height: 100px;    background-color: #269abc;  }

<div class="fixed-top"></div>  <div class="fluid-center"></div>  <div class="fixed-bottom"></div>

if can not use viewport units use solution

html, body{      margin: 0;      padding: 0;      height: 100%; /*set height: 100% containers of divs*/  }    .fixed-top{    height: 50px;    background-color: #5cb85c;  }    .fluid-center{    height: calc(100% - 150px);/*using %*/    background-color: indianred;    overflow: auto;  }    .fixed-bottom{    height: 100px;    background-color: #269abc;  }

<div class="fixed-top"></div>  <div class="fluid-center"></div>  <div class="fixed-bottom"></div>