How to add 100% height to a Bootstrap 4 column

Question

I am using bootstrap 4.1, previously I tried to use the class h-100, and unsuccessfully, even Chrome Developer tools indicating that height:100% was applied to the elements. I decided to use a class as the min-height and height attributes and also ends up in the same error.

The css class is this

.maximo{
    min-height:100%;
    height:100%;
}

The html code is this

    <div class="container-fluid maximo" th:fragment="aaa">
        <div class="row h-100 maximo">
            <nav class="col bg-dark navbar-dark sidebar navbar-expand-sm maximo">
                <a class="navbar-brand" href="#">Planejar Melhor</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="sidebar-sticky navbar-collapse collapse maximo" id="navbarSupportedContent">
                    <ul class="nav flex-column maximo">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                Info
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Simulações
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Contas
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4 maximo">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom maximo">
                    <h1 class="h2">Ínicio</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
                            Periodo
                        </button>
                    </div>
                </div>
            </main>
        </div>
    </div>

Imagem
[![inserir a descrição da imagem aqui][1]][1]


  [1]: https://i.stack.imgur.com/rBjJm.png

Edit:

    <div class="row h-100 mh-100">
        <nav class="col bg-dark navbar-dark sidebar navbar-expand-sm mh-100">
            <a class="navbar-brand" href="#">Planejar Melhor</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="sidebar-sticky navbar-collapse collapse maximo" id="navbarSupportedContent">
                <ul class="nav flex-column maximo">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            Info
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            Simulações
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            Contas
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4 mh-100">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom h-100 mh-100">
                <h1 class="h2">Ínicio</h1>
                <div class="btn-toolbar mb-2 mb-md-0">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
                        Periodo
                    </button>
                </div>
            </div>
        </main>
    </div>
</div>

Result (using colors to see the actual size)

Answer 1

Your problem is that your HTML and the BODY does not have a defined height value, so even putting height 100% the browser does not understand, as it would be 100% of that?

So first you define height:100% in HTML and BODY, these values are now valid as a reference and the children can be 100% tall for parents.

OBS1: Also note that now that height has been set for HTML and Body the default class h-100 works properly, you don’t need to use the class .maximo

OBS2: I had to take a margin of a div inside the MAIN to not give scroll bar on the screen without needing.

OBS3: You don’t need to put the CSS in hand in HTML and Body :D , you can use the class h-100 in them, but I did it by hand to help you understand why it wasn’t working.

Display in "Whole Page" to have a better result since the responsive part has not yet been made.

html, body {
    height: 100%;
}

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"/>

    
    <div class="container-fluid h-100" th:fragment="aaa">
        <div class="row h-100">
            <nav class="col bg-dark navbar-dark sidebar navbar-expand-sm">
                <a class="navbar-brand" href="#">Planejar Melhor</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="sidebar-sticky navbar-collapse collapse" id="navbarSupportedContent">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                Info
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Simulações
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Contas
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
    
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 border-bottom h-100">
                    <h1 class="h2">Ínicio</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
                            Periodo
                        </button>
                    </div>
                </div>
            </main>
        </div>
    </div>

See how your code works.

Answer 2

Using Bootstrap 4.0, has the classes h-:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
    <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
        <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
        <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
        <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
        <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</html>

Reference of Sizing