Layout viewport with fixed height using divs tags

Question

I try to create layout "viewport" with fixed heigh for top, fixed height for footer, and middle part with remaining height. I need to do this using div tags. Here's what 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 that will be the central part of the vertical-scroll. But this did not happen. Moreover, I see a wrong mapping in FireFox.

How to solve this problem?

Answer 1

If I do not misunderstand this should solve your 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 you can not use viewport units then use this solution

html, body{
    margin: 0;
    padding: 0;
    height: 100%; /*set height: 100% to all containers of the 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>