Bootstrap 4 минимальная высота страницы / боковой панели - PullRequest
Новая
       11

Bootstrap 4 минимальная высота страницы / боковой панели

0 голосов
/ 23 сентября 2018

Мой код выглядит следующим образом: 

<div class="container-fluid">
    <div class="row">
        <nav>...</nav> <!-- sidebar -->
        <main role="main">
            <!-- content -->
        </main>
    </div>
</div>

Я пытаюсь установить минимальную высоту, потому что когда содержимое слишком короткое, боковая панель выглядит следующим образом:

enter image description here

Обратите внимание на пустой белый низ изображения

Настройка html, body, .container-fluid, .row Высота до 100% исправляет это на этой странице, но разрывает страницы с содержимымбольше 100% (боковая панель снова слишком короткая, но на этот раз она (только) 100% высоты экрана):

enter image description here

Это боковая панель после прокрутки, она не выходит за пределы 100%.

Я хочу, чтобы боковая панель имела высоту 1OO%, когда контент короче экрана, и должен был достигатьконтент, когда контент длиннее экрана. Как установить минимальную высоту для боковой панели (или .container-liquid)? nav { min-height: 100%; } тоже не сработало.Кажется, что min-height работает очень странно в CSS3.

JSFiddle: http://jsfiddle.net/uc9gm2ke/3/

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Я исправил это, скопировав код из этого codeply: https://www.codeply.com/go/kTmpqn61nq

CSS: 

body, html, .container-fluid {
    height: 100%;
}

.wrapper {
    min-height: 100vh;
    max-height: 100%;
}

main {
    max-height: 100%;
    overflow-y: auto;
}

HTML:

  • Добавьте wrapper класс вглавная .row див.

Вот мой код: http://jsfiddle.net/uc9gm2ke/16/

0 голосов
/ 23 сентября 2018

Вам не нужен дополнительный CSS для добавления, этот HTML отлично работает.

HTML 

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Dashboard</title>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <nav class="col-12 col-md-3 col-lg-2   navbar navbar-expand-md   navbar-dark bg-dark   pt-md-3 pl-md-2 pl-xl-3   d-md-block"> <!-- d-flex -->
          <a class="navbar-brand" href="#">
            <i class="fas fa-cog"></i> Administration
        </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
          <div class="navbar-collapse collapse mt-md-1" id="sidebar">
            <ul class="navbar-nav d-block mr-auto">
              <li class="nav-item w-100 btn btn-dark text-left">
                <a class="nav-link active" href="#">
                Dashboard <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item w-100 btn btn-dark text-left">
                <a class="nav-link" href="#">
                Orders
                </a>
              </li>
            </ul>
          </div>
        </nav>

        <main role="main" class="col-12 col-md-9 col-lg-10 px-4">
          some content
          <!-- when you uncomment code below, it works -->
           <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>a
          lot of content
        </main>

      </div>

    </div>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...