Как сделать bootstrap высота столбца до оставшейся высоты экрана - PullRequest
Новая
       6

Как сделать bootstrap высота столбца до оставшейся высоты экрана

0 голосов
/ 17 января 2020

У меня есть веб-страница с навигационной панелью, боковой панелью и таблицей внутри основного контента. Мой упрощенный код выглядит следующим образом: 

<body>

  <!-- Navbar -->
  <nav class="navbar navbar-dark bg-dark py-2 sticky-top">
    <!-- navbar content -->
  </nav>

  <!-- Actual Content -->
  <div class="container-fluid flex-grow-1">
    <div class="row h-100">

      <!-- Sidebar -->
      <div class="col-lg-3 col-md-4 d-none d-md-flex h-100 flex-column sidebar">
        <!-- sidebar content -->
      </div>

      <!-- Content -->
      <div class="col-lg-9 col-md-8 flex-sm-column">
        <div class="main-content w-100 d-flex flex-grow-1">
          <!-- table with variable height -->
        </div>
      </div>

    </div>
  </div>
<body>

html,
body {
  height: 100vh !important;
  display: flex;
  flex-direction: column;
}

/* FOR SIDEBAR */
.sidebar {
  background-color: white;
  border-right: 1px solid var(--light-grey);
  padding: 0 1.5rem;
}

/* TABLE */
.main-content {
  max-height: 100%;
  overflow: auto;
}

.table {
  margin: 0;
}

Я хочу, чтобы тело всегда имело высоту экрана. Когда таблица маленькая, это достигается, но когда таблица переполняется, высота тела увеличивается. Как сделать так, чтобы content занимал только оставшуюся высоту экрана, а любое переполнение (из таблицы) принималось вместо main-content вместо тела?

Я попытался установить высоту все на 100%, а также игра со свойствами flex-grow, но ничего не получалось. Скажите, если мне все еще нужно включить больше деталей c, но это все, что фактически использует свойства измерения.

1 Ответ

1 голос
/ 17 января 2020

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

@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}


/* FOR SIDEBAR */

.sidebar {
  background-color: white;
  border-right: 1px solid black;
  padding: 0 1.5rem;
}

.relative {
  position: relative;
}

.main-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
}
<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark py-2 sticky-top">
  navbar content
</nav>

<!-- Actual Content -->
<div class="container-fluid flex-grow-1">
  <div class="row h-100">

    <!-- Sidebar -->
    <div class="col-lg-3 col-md-4 d-none d-md-flex h-100 flex-column sidebar">
      sidebar content s
    </div>

    <!-- Content -->
    <div class="col-lg-9 col-md-8 relative">
      <div class="main-content">
        table with variable height <br>
        s<br>s<br>s<br>s<br>s<br>s<br> s
        <br>s<br>s<br>s<br>s<br>s<br> s
        <br>s<br>s<br>s<br>s<br>s<br> s
        <br>s<br>s<br>s<br>s<br>s<br>
      </div>
    </div>

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

Похожие темы

...