如何用纯Bootstrap实现容器填满视口且无垂直滚动条？

可以通过Bootstrap内置类实现，核心是构建完整的高度传递链并消除默认样式导致的溢出问题，修改后的代码如下：

<html class="h-100">
<body class="h-100 m-0 d-flex flex-column">
<div class="container-fluid h-100 flex-grow-1">
   <div class="row h-100">
      <div class="col-sm-4 bg-info h-100">first column</div>
      <div class="col-sm-8 bg-warning h-100">second column</div>
   </div>
</div>
</body>
</html>

关键类的作用： #

• h-100：给<html>、<body>、.container-fluid、.row和列层级添加该类，确保每个节点都继承100%视口高度，形成完整的高度传递链。
• m-0：移除<body>默认的外边距，避免因默认边距导致视口高度溢出，进而产生滚动条。
• d-flex flex-column：将<body>设置为垂直方向的flex容器，确保.container-fluid能通过flex-grow-1属性填满剩余垂直空间（后续若添加头部、底部元素也能适配）。
• flex-grow-1：让.container-fluid占据<body>内所有可用垂直空间，保证内容区域恰好填满视口。

以上方案完全依赖Bootstrap内置类实现，无需自定义CSS，容器会精准填满整个视口且无垂直滚动条。

内容的提问来源于stack exchange，提问作者Darren Oakey