• Register

Solution:

You require to fix height: 100%; for html,body and the container-fluid

Follw the below code:

​
html, body {
  height: 100%;
}

.row {
  border: thin solid black;
}

​
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container-fluid h-100">
  <div class="row h-25">
    <div class="col-12">
      <h1>test</h1>
    </div>
  </div>
  <div class="row h-50">
    <div class="col-4">height</div>
    <div class="col-8">50</div>
  </div>
  <div class="row h-25">
    <div class="col-10">height</div>
    <div class="col-2">25</div>
  </div>
</div>

 

Illustration:

The significant thing is that your divs should be wrapped inside something else which has a defined height. Else the percentages are pointless - 25% of what, exactlly?

Like:

​
​
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div style="height: 100px;">
  <div class="h-25" style="background-color: yellow">Height 25%</div>
  <div class="h-50" style="background-color: red">Height 50%</div>
  <div class="h-25" style="background-color: green">Height 25%</div>
</div>

​

​

 

posted Jul 2 in html 17,260 points