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; 
}