Trying to make div heights as percentages of the body height. I’m using bootstrap version 5.3. I’m able to make the body element 100% of the view. However, all the other div have the same size of 24px. I’m trying to cover the entire height of the page. The following is not working. I’ve gone through several other posts that address this but none have worked for me so far. What am I missing? Blow if the full code.
<!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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</html>
1
Using vh units setting heights relative to the viewport height. This ensures the elements take up the desired proportions of the viewport height without needing to explicitly set the height of the parent elements.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<body>
<div class="container-fluid">
<div class="row" style="height: 8vh; background-color: blueviolet">
<div class="col-12">header</div>
</div>
<div class="row" style="height: 80vh; background-color: aliceblue">
<div class="col-12">main</div>
</div>
<div class="row" style="height: 4vh; background-color: green">
<div class="col-12">thin banner</div>
</div>
<div class="row" style="height: 8vh; background-color: darkslategray">
<div class="col-12">footer</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
As I understand, you need the divs to fill the entire page. If so, with flexbox, it’s quite easy.
I changed the heights to be rounded up evenly to be visually more appealing and to better see what’s happening. Also, I took out the inline styling because it’s easier to maintain. And as you can see, I added a unique class to each .row for easier addressing.
<!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/[email protected]/dist/css/bootstrap.min.css" />
</head>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid {
display: flex;
flex-flow: column;
height: 100%;
}
.header {
height: 10%;
background-color: blueviolet
}
.main {
height: 70%;
background-color: aliceblue
}
.banner {
height: 10%;
background-color: green
}
.footer {
height: 10%;
background-color: darkslategray
}
</style>
<body>
<div class="container-fluid">
<div class="row header">
<div class="col-12" style="">
header
</div>
</div>
<div class="row main" style="">
<div class="col-12">main</div>
</div>
<div class="row banner" style="">
<div class="col-12">thin banner</div>
</div>
<div class="row footer" style="">
<div class="col-12">footer</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</html>Both of these declarations are necessary:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid {
display: flex;
flex-flow: column;
height: 100%;
}
And notice: I changed the percentages to add up 100% in sum.