如何使用bootstrap使网页100％宽度？

Question

我正在使用bootstrap我有要求用户要求布局100％的高度和宽度应覆盖页面上的所有空间。我尝试了bootstrap类.container-fluid，但它没有用。知道我在下面的代码中做错了吗？

的index.html

 <div id="main-content" style="padding-bottom: 3rem;" ng-if="user">
    <div class="container-fluid">
        <breadcrumbs></breadcrumbs>
        <div ui-view></div>
    </div>
 </div>

Answer 1

aftab 请查看 Fiddle 。
您可以制作class并使用vh和vw（身高/宽度）。

您会看到区块 class距离导航栏高度的整体视图端口高度需要50px。

.block {
    height: calc(100vh - 50px); /* less 50px for the height of the Navbar */
    width: 100vw;
    background-color: darkorange;
}  

请注意，这会填满整个屏幕而没有滚动条。 看看这对你有帮助吗。

只需阅读 this 即可获得浏览器支持。