Bootstrap：在 navbar-fixed-top 和 navbar-fixed-bottom 之间创建一个动态 div答案

【问题标题】：Bootstrap: make a dynamic div between navbar-fixed-top and navbar-fixed-bottomBootstrap：在 navbar-fixed-top 和 navbar-fixed-bottom 之间创建一个动态 div
【发布时间】：2017-10-27 08:22:53
【问题描述】：

我有一个带有两个用于导航的 div 的引导页面，一个是 navbar-fixed-top，另一个是 navbar-fixed-bottom。所以，导航栏粘在顶部/底部。

现在我想声明一个 div，它恰好是两个导航栏之间的空间（草图中的 xxxxxx）。关于如何实现这个 div 有什么建议吗？

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    ..
  </div>
</div>

[DIV FOR THE REST OF THE PAGE]

<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container">
    ..
  </div>
</div>

.________________________________________________________。 |~~~~~~~~~~~~~~~~~~~导航栏固定顶~~~~~~~~~~~~~~~~~~~| |________________________________________________________| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| |________________________________________________________| |~~~~~~~~~~~~~~~~~导航栏固定底部~~~~~~~~~~~~~~~~~~| |___________________________________________________|

【问题讨论】：

标签： html css twitter-bootstrap navigation alignment

【解决方案1】：

如果您的导航栏是固定的。您可以在正文的顶部和底部添加边距。

<html>    
 <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
              <div class="container">
                ..
              </div>
            </div>


            [DIV FOR THE REST OF THE PAGE]


            <div class="navbar navbar-inverse navbar-fixed-bottom">
              <div class="container">
                ..
              </div>
            </div>
        <style>
            body{
                 margin-top: 100px;
                 margin-bottom: 100px;
            }
        </style>
    </body>
</html>

margin top 是 top nav 的高度，margin bottom 是 bottom nav 的高度。

【讨论】：

您还可以为正文添加边距。
但这不是响应式的，是吗？
我认为它是正确的，如果导航栏有固定的高度。如果没有，您可以使用 @media() css 进行更改。
不客气。
但我如何告诉<div class="contentarea"> [DIV FOR THE REST OF THE PAGE] </div> 与剩余页面的其余部分一样高。现在它只和它的内容一样高，也就是 0px。