当尝试使用bootstrap 5创建一个覆盖页面整个高度的div时，尽管使用了"max-height"类，但我的div似乎从未扩展过，在下面的代码中，有什么东西阻止我的div扩展整个页面高度吗？我还尝试了原始css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0 height=device-height">
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come *after* these tags
-->
<title>
</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of
HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.
js">
</script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->
</head>
<body>
<div class="container bg-light max-height d-flex align-items-center">
<h1> Hello world </h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript
plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/j
query.min.js">
</script>
<script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
我也尝试过原始css，但仍然没有运气
div{
height: 100%
}
这个问题刚开始随机发生，有什么建议吗？ps我在事后将height=device-height放入我的一个元标签中，看看这是否有效，但没有运气
添加
html,body {
height: 100%
}
要设置最小高度，请使用css部分，如下所示；
.div-style {
min-height: 100%;
overflow: hidden;
background-color: black;
}
如果html部分是这样的，它就会工作。
<div class="div-style">
</div>
我希望有用