Max height div not working in css and bootstrap 5-CodePudding

when trying to use bootstrap 5 to create a div that covers the entire height of the page my div never seems to expand despite using the 'max-height' class, is there anything preventing my div from expanding the entire page height in the code below? I also tried with raw 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/[email protected]/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 >
      <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/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
      crossorigin="anonymous"></script>
</body>

I also tried with raw css but still no luck

div{
height: 100%
}

this problem just started happening randomly any suggestions? ps i put in height=device-height into one of my meta tags after the fact to see if that worked but no luck

CodePudding user response：

Add

html,body {
height: 100%
}

CodePudding user response：

To set min-height, use the css part as follows ;

.div-style {
  min-height: 100%;
  overflow: hidden;
  background-color: black;
}

If the html part is like this, it will work.

<div >
 
</div>

I hope it's useful