bootstrap：拉伸中心的内容div

Question

我想将内容div填充到页眉和页脚中间的空格。

目前页眉和页脚使用`bootstrap：

进行样式设置

头：

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

内容div的css代码是

.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

如果您的页眉和页脚在所有设备中保持50px高度，您可以执行以下操作：

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