Question

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

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

当我在我的路线模板中放置一个图像时，它会在底部的navBar下面并使页面可滚动。

所以，我想知道如何在不在Css中编写修复大小的情况下限制路由器插座内容的高度，以保持响应！

由于

image example

Answer 1

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

（并且不要忘记将margin: 0添加到html, body以避免使用上述代码导致滚动条的默认边距。

Answer 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

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

2 个答案: