bootstrap：在中心拉伸内容 div答案

【问题标题】：bootstrap: stretch the content div in the centerbootstrap：在中心拉伸内容 div
【发布时间】：2016-09-20 16:12:19
【问题描述】：

我想将内容 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，效果会很好。一旦由于屏幕尺寸不同而导致页眉/页脚高度发生变化，任何想法都可以做。

【问题讨论】：

【解决方案1】：

您可以使用媒体查询并为您的页眉/页脚具有不同高度的每个屏幕尺寸定义 div 高度。

也许您可以与您的代码共享一个 jsfiddle？

【讨论】：

【解决方案2】：

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

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

【讨论】：

对不起。页眉/页脚高度也发生了变化
那么你应该在页眉和页脚高度发生变化的媒体查询中覆盖内容 div 的高度属性。类似于： height: calc(100% - (headerHeight + footerHeight));