html - Bootstrap : stretch the content div in the center

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？