Is there a way to make the height of div elements a percentage of the body height? I am currently using Bootstrap version 5.3 and have managed to set the body element to be 100% of the viewport. However, all other div elements are staying at a fixed size of 24px. My goal is to have these divs cover the entire height of the page. Despite trying various solutions found in different posts, none seem to work for me. Can you help point out what I might be missing? Below is the complete code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3dfc3de">[email protected]</a>/dist/css/bootstrap.min.css" />
</head>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12" style="height: 5%; background-color: blueviolet">
header
</div>
</div>
<div class="row" style="height: 86.5%; background-color: aliceblue">
<div class="col-12">main</div>
</div>
<div class="row" style="height: 1.9%; background-color: green">
<div class="col-12">thin banner</div>
</div>
<div class="row" style="height: 6.56%; background-color: darkslategray">
<div class="col-12">footer</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398849885">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</html>