CODEWITHSUNDEEP
htmlbootstrap-4
user9975473
user9975473

Reputation:

I need to fix Bootstrap h-100 class it is not working

I have a sidebar in admin panel. And I try to make this sidebar height of 100%, but I could not solve my problem this way.

https://jsfiddle.net/irankhosravi/u96nykbx/1/

<html class="h-100">
<head>
    <title>Admin</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="h-100">
    <div class="row h-100">
    <div class="col-md-2 h-100 bg-success" id="sidebar"></div>
    <div class="col-md-10 bg-danger" style="height: 500px;"></div>
    </div>
</body>
</html>

Upvotes: 2

Views: 19962

Answers (2)

Amir7
Amir7

Reputation: 42

You should mention:

h-25 , h-50 , h-75 and h-100 set your div's height based on your parent's height. You have 2 ways :

  1. Set the height of your parent's division

  2. Use height = 100 vh in your css file fir your division

Upvotes: 1

tao
tao

Reputation: 90068

First of all, you shouldn't place .rows as direct children of <body>. You need to wrap them in either .container or .container-fluid. If you do not, you'll experience a horizontal scrollbar on your page at various screen widths.
Please note you should not have a .container inside another .container, but you can have a .container inside a .container-fluid.

Secondly, in order for .h-100 to work you need to pass it down the chain of children to each element, because it's always 100% of its parent. If one parent doesn't have it, the chain is broken and it's children will have 100% of 0 (or maxContent if that element has some flow content).

Here's your example with .container:

<html class="h-100">
<head>
    <title>Admin</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body class="h-100">
  <div class="container h-100">
    <div class="row h-100">
      <div class="col-md-2 h-100 bg-success" id="sidebar"></div>
      <div class="col-md-10 bg-danger h-100"></div>
     </div>
    </div>
</body>
</html>

And here it is with .container-fluid:

<html class="h-100">
<head>
    <title>Admin</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body class="h-100">
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col-md-2 h-100 bg-success" id="sidebar"></div>
      <div class="col-md-10 bg-danger h-100"></div>
     </div>
    </div>
</body>
</html>

While considered fairly easy to pick up and use, Bootstrap has a few gotchas. Until you get them, read the docs carefully and rely on their examples.

Upvotes: 13

Related Questions