引导程序填充没有滚动条的垂直空间



so-我可以在bootstrap上找到很多关于填充垂直空间的堆栈重载文章-从使用h-100到flex-grow-1-但我找不到一个简单地填充容器而不给我一个veritcal滚动条的文章。

以下是我正在尝试的:

<html>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-info" >first column</div>
<div class="col-sm-8 bg-warning" >second column</div>
</div>
</div>
</body>
</html>

是否有任何纯粹的引导方法可以使其完全填充整个视口而不显示滚动条?我可以通过使用css进行黑客攻击,或者直接使用flex网格来实现这一点,但我无法通过添加引导类来实现。(两种背景样式只是

.行上,您可以添加这些类vh-100 align-items-stretch

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container-fluid">
<div class="row vh-100 align-items-stretch">
<div class="col-sm-4 bg-info">first column</div>
<div class="col-sm-8 bg-warning">second column</div>
</div>
</div>

最新更新