1

Estou utilizando o bootstrap 4.1, anteriormente tentei utilizar a classe h-100, e sem sucesso, mesmo o chrome developer tools indicando que height:100% foi aplicado aos elementos. Resolvi utilizar uma classe como os atributos min-height e height e também acaba no mesmo erro.

A classe css é esta

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

O código html é este

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

Resultado (utlizando cores para ver o tamanho real)

inserir a descrição da imagem aqui

5
  • coloca position relative nessa classe pra ver
    – Wees Smith
    16/05/2018 às 12:15
  • 1
    a coluna continua igual
    – E.ss
    16/05/2018 às 12:18
  • tem outro elemento antes desses? ou só o body?
    – Wees Smith
    16/05/2018 às 12:27
  • 1
    apenas o <body>
    – E.ss
    16/05/2018 às 12:31
  • achei algo pra te ajudar
    – Wees Smith
    16/05/2018 às 12:32

2 Respostas 2

3

O seu problema é que seu HTML e o BODY não tem um valor de altura definido, então mesmo colocando height de 100% o browser não entende, pois seria 100% de que?

Então primeiro vc define height:100% no HTML e BODY, agora esses valores valem como referencia e os filhos pode ter 100% de altura referentes aos pais.

OBS1: Repare também que agora que foi definido altura para o HTML e Body o classe default h-100 funciona corretamente, vc não precisa usar a classe .maximo

OBS2: Tive que tirar uma margem de uma div dentro do MAIN para não dar barra de rolagem na tela sem precisar.

OBS3: Vc não precisa coloca o CSS na mão no HTML e Body :D , vc pode usar a classe h-100 neles, mas fiz na mão para te ajudar a entender pq não estava funcionando.

Exiba em "Página toda" para ter um resultado melhor já que ainda não foi feita a parte responsiva.

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>

Veja como fica seu código funcionando.

0

Usando Bootstrap 4.0, tem as 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>

Referência do sizing

1
  • Amigo, a classe define height, se aplicado a todos elementos necessários, funciona perfeitamente
    – Wees Smith
    16/05/2018 às 13:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .