How to add 100% height to a Bootstrap 4 column

Question

How to add 100% height to a Bootstrap 4 column

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

I'm using bootstrap 4.1, I previously tried to use the h-100 class, and to no avail, even the chrome developer tools indicating that height:100% was applied to the elements. I decided to use a class like the attributes min-height and height 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 actual size)

html css bootstrap-4

asked by anonymous 16.05.2018 / 14:13

2 answers

0

Using Bootstrap 4.0 , has the h- classes:

<!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><scriptsrc="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>

sizing

16.05.2018 / 14:31

Read values from a Json structure using Jquery The 'useMongoClient' error is no longer necessary in mongoose 5.x, please remove it

score 3 · Accepted Answer

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

Then you first define height:100% in HTML and BODY, now these values are valid as a reference and children can be 100% tall relative to their parents.

OBS1: Note that now that the height for HTML and Body has been set, the default class h-100 works correctly, you do not need to use the .maximo class

OBS2: I had to pull a margin from a div inside the MAIN so as not to give the scroll bar on the screen without needing it.

OBS3: You do not need to put CSS in hand in HTML and Body: D, you can use the h-100 class in them, but I did it on hand to help you understand why it was not working .

Display in "All Page" to get a better result as 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.