Макет видового экрана с фиксированной высотой с использованием тегов divs

Question

Я пытаюсь создать макет «viewport» с фиксированным высотой для верхней, фиксированной высоты для нижнего колонтитула и средней части с оставшейся высотой. Мне нужно сделать это, используя теги div. Вот что произошло

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/

Я ожидаю, что будет центральная часть вертикальной прокрутки. Но этого не произошло. Более того, я вижу неправильное отображение в FireFox.

Как решить эту проблему?

Answer 1

Если я не неправильно, это должно решить вашу проблему

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>

Если вы не можете использовать viewport units затем использовать это решение

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>