bootstrap：拉伸中間的內容div

Question

我想填充內容div到頁眉和頁腳中間的空間。

目前頁眉和頁腳是使用`樣式自舉：

頭：

<nav id="header" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    ... 
    </div> 
</nav> 

頁腳：

<nav id="footer" class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="container-fluid"> 
    test footer 
    </div> 
</nav> 

內容：

<div id="content" class="panel panel-default"> 
    ... 
</div> 

用於內容CSS代碼DIV是

.content{ 
    position: absolute; 
    top: 50px; 
    left: 0px; 
    right: 0px; 
    bottom: 50px; 
    overflow-y: auto; 
} 

它運作良好，如果頁眉/頁腳的高度固定在50px。任何想法一旦頁眉/頁腳高度由於不同的屏幕尺寸而改變。

Answer 1

您可以使用媒體查詢和定義DIV高度爲每一個屏幕大小的頁眉/頁腳在不同的高度。

https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

也許你可以用共享的jsfiddle您碼？

Answer 2

如果您的頁眉和頁腳中的所有設備保持在50像素高度，你可以做類似如下：

.content{ 
    width: 100%; 
    height: calc(100% - 100px); 
    position: absolute; 
    left: 0; 
    top: 50px; 
    overflow-y: auto; 
}