我有一行有一列的侧栏，我想用它来做侧栏。我希望侧边栏的高度是100%，即使内容没有滚动条。
如果我添加 vh-100 到行，如果页面滚动，它就会被切断。
如果我使用 h-100 的html、body、container和row。
我还尝试了 mh-100 行上，并发生了同样的结果。
例如 https:/jsfiddle.netL0cxhred。
如何让侧边栏总是100%的高度，并且在有滚动条的情况下不会被切掉？最好是使用bootstrap 4的功能。
试着在你的div内容中添加position-fixed，并声明col大小，就像这个例子。我添加了一个类.content-side，用一个margin来分隔你的列。
.content-side{
margin-left: 30%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="6cVeUL8545aLqj1Fo8zZCGwhxzbZP5bsS4oPK5cG">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<title>Home | Larapi</title>
</head>
<body>
<div class="container-fluid d-flex justify-content-around">
<div class="row mx-0">
<div class="position-fixed col-md-3 col-sm-3 bg-dark text-light vh-100">
<h4 class="my-4 mx-3">
<a href="#" class="text-decoration-none">
<i class="fab fa-laravel text-light"></i>
<span class="text-light">Larapi</span>
</a>
</h4>
<h6 class="small text-uppercase mx-3">Models</h6>
<ul class="list-unstyled">
<li>
<a href="#" class="btn btn-block btn-primary text-left pr-3">
<i class="fas fa-fw fa-cog"></i>
Model
</a>
</li>
<li>
<a href="#" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
<i class="fas fa-fw fa-cog"></i>
Model Name
</a>
</li>
</ul>
<h6 class="small text-uppercase mx-3">Admin</h6>
<ul class="list-unstyled">
<li>
<a href="#" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
<i class="fas fa-fw fa-cog"></i>
Models
</a>
</li>
<li>
<a href="#" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
<i class="fas fa-fw fa-cog"></i>
Files
</a>
</li>
<li>
<a href="http://larapi.test/logout" class="btn btn-block btn-link text-left text-light text-decoration-none pr-3">
<i class="fas fa-fw fa-sign-out-alt"></i>
Logout
</a>
</li>
</ul>
</div>
<div class="col-md-8 col-sm-8 content-side">
<div class="p-4">
<h1 class="mb-3">Home</h1>
<p>You are logged in!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, vel, veritatis! Ad, beatae consequatur cum cumque et exercitationem fuga laudantium nisi, nulla numquam odio omnis qui quod, similique sit vel?</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, vel, veritatis! Ad, beatae consequatur cum cumque et exercitationem fuga laudantium nisi, nulla numquam odio omnis qui quod, similique sit vel?</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>添加 min-vh-100 到行工作。