限制两个导航栏之间 div 的大小答案

【问题标题】：Limit the size of a div between two navbars限制两个导航栏之间 div 的大小
【发布时间】：2018-07-18 23:51:17
【问题描述】：

我正面临这个问题：我正在使用 css 框架 bootstrap 4.0.0 开发一个有角度的网络应用程序。此应用需要适合屏幕大小（无滚动条）。

<nav class="navbar fixed-top navbar-expand navbar-dark">
    Upper navBar    
</nav>

<router-outlet></router-outlet>

<nav class="navbar fixed-bottom navbar-expand navbar-dark">
    Test
</nav>

当我将图像放入路线的模板中时，它会位于底部导航栏下方并使页面可滚动。

所以我想知道如何限制路由器插座内容的高度，而无需在 Css 中编写固定大小以保持响应！

谢谢

image example

【问题讨论】：

我们能有一个小提琴或至少一张图片吗？
如果router-outlet 的高度超过视口/浏览器高度会怎样。是否只有 router-outlet 有滚动条而不是整个“应用程序”？
@ZimSystem 滚动条在整个应用程序上
那为什么会说“这个应用需要适应屏幕的大小（没有滚动条）。”？
这个网络应用程序将在平板电脑上使用，我们不希望有任何滚动条。所有内容都必须适合。

标签： html css angular twitter-bootstrap bootstrap-4

【解决方案1】：

如果两个导航栏都有一个固定的height，您可以将height: calc(100vh - XXX); 应用于您的内容元素，其中“XXX”代表两个导航栏加在一起的高度（以像素为单位）。

（并且不要忘记将margin: 0 添加到html, body 以避免默认边距，这会导致上述代码出现滚动条）

【讨论】：

它不起作用。实际上这很奇怪，因为我将路由器插座的最大高度设置为 50vh 只是为了尝试并且它不会改变任何东西（在我的路由器插座中只有一个）。

【解决方案2】：

由于您使用的是 Bootstrap 4，我会使用 flexbox...

https://www.codeply.com/go/bukgbRdpYl

<body class="d-flex flex-column">
 <nav class="navbar navbar-expand navbar-dark">
    Upper navBar
 </nav>
 <router-outlet>
    ..
 </router-outlet>
 <nav class="navbar navbar-expand navbar-dark">
    Test
 </nav>
</body>

您并不想拥有固定位置的导航栏，否则内容将隐藏在导航栏后面。我不知道你想如何处理滚动。

另一个例子：https://www.codeply.com/go/aKhXKOeBTi

【讨论】：

不幸的是，即使它在 codeply 中有效，该解决方案也不适用于我的项目 :'(。关于滚动，我只有图像或按钮或仪表板，无需滚动。我赢了'没有大文本或长页面
概念还是一样