当我在Chrome开发工具中更改页面宽度时，页面也会垂直增长。bootstrap假设的视口高度似乎比实际情况更大。
相关代码：
<!DOCTYPE html>
<html class="vh-100">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<title>Reef Chat</title>
<style>
* { border: 1px black solid;}
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
#form {display: inline-flex; backdrop-filter: blur(10px); }
#input {border-radius: 0;}
#input:focus {outline: none;}
#form > button {background: #333; border: none; outline: none; color: #fff; border-radius: 0;}
</style>
</head>
<body class="vh-100">
<div class="container-fluid h-100">
<ul id="messages"></ul>
<form id="form" action="" class="position-fixed bottom-0 start-50 translate-middle-x w-100">
<input id="input" autocomplete="off" class="form-control"/><button class="btn btn-primary">Send</button>
</form>
</div>
...
参考这个答案
height: 100vh=视口高度的100%
height: 100%=父元素高度的100%
如果我有593像素的窗口高度，并且如果我在<body>上使用height: 100vh;，则body本身将是包括边界的593像素高度
但如果我在<html>和<body>上都使用height: 100%;，则html元素的高度为593像素，而body的高度为591像素。在两个元素上都有这个height: 100%;不会溢出您的body标记。
选项1
删除html和body上的class="vh-100"，改为使用CSSheight: 100%;。
* {
border: 1px black solid;
}
html {
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
height: 100%;
}
#form {
display: inline-flex;
backdrop-filter: blur(10px);
}
#input {
border-radius: 0;
}
#input:focus {
outline: none;
}
#form>button {
background: #333;
border: none;
outline: none;
color: #fff;
border-radius: 0;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid h-100">
<ul id="messages"></ul>
<form id="form" action="" class="position-fixed bottom-0 start-50 translate-middle-x w-100">
<input id="input" autocomplete="off" class="form-control" />
<button class="btn btn-primary">Send</button>
</form>
</div>
</body>在jsfiddle上看到它的作用。
选项2
在<body>标签上使用overflow: hidden;。
在jsfiddle上看到它。