Bootstrap - 容器到屏幕大小

【问题标题】：Bootstrap - Container to size of screenBootstrap - 容器到屏幕大小
【发布时间】：2020-08-25 22:02:26
【问题描述】：

我正在 Bootstrap 中设计一个页面，并且无论屏幕大小如何，我都需要一个容器来填充整个屏幕。有没有一种简单的技术可以做到这一点？用户仍然可以滚动，但需要确保页面加载时该容器始终位于折叠之前。

【问题讨论】：

【解决方案1】：

尝试将您的代码包装在一个带有 container-fluid 类的块中

【讨论】：

【解决方案2】：

试一试：

<div id="main-div" class="container-fluid main_container">

   <div class="row">
    
   </div>

</div>

【讨论】：

【解决方案3】：

类名container-fluid 将使用全角。

对于高度，您需要使用自己的 css。

将高度和宽度设置为 100vw（=100% 视图宽度）和 100vh（=100% 视图高度）或 90vh（如果您希望它比页面高度略短）。

.full-page {
    width: 100vw;
    height: 100vh;
}

如果您还需要为导航栏等其他元素腾出空间，您可以使用 calc() 来解决此问题

height: calc(100vh - 50px);

【讨论】：