如何使用引导程序使网页宽度为 100%？

Question

我正在使用引导程序，我有一个要求，用户要求将布局设置为 100% 的高度和宽度，以覆盖页面上的所有空间。我尝试了引导类 .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（高度/宽度）。

您将看到 block class 与导航栏高度的整体视口高度相距 50px。

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

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

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