Html Question posted in
Some basic documentation can be found here.

Html – Trying to size div as percentages of the entire page

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>
Tags:

2

Answers


  1. 0

    As I understand, you need the div‘s to fill the entire page. If so, with flexbox, it’s quite easy.

    I changed the height‘s 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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search