固定高度使用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>