固定高度使用div标签的布局视口

Question

我尝试创建布局“视口”，固定高度为顶部，固定高度为页脚，中间部分为剩余高度。我需要使用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>