Issue
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/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>
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
Solution
Add
html,body {
height: 100%
}
Answered By - בלימי בוימל
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.