Как зафиксировать sidebar, чтобы он не уходил за нижнее меню

Question

Подскажите, пожалуйста, как сделать, чтобы sidebar автоматически растягивался в высоту и не заходил ниже меню которое у меня расположено и зафиксировано внизу страницы.

Добавила для понимания↓

var toggleBtn = document.querySelector('.sidebar-toggle');
var sidebar = document.querySelector('.sidebar');

toggleBtn.addEventListener('click', function() {
  toggleBtn.classList.toggle('is-closed');
  sidebar.classList.toggle('is-closed');
})

.sidebar-toggle {
     position: fixed;
     z-index: 1;
     border: 4px solid #fff;
     outline: none;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     margin-left: 18.8em;
     margin-top: 1em;
     background-color: #253fe1;
     transform: rotate(45deg);
     cursor: pointer;
     transition: 0.5s;
}
 .sidebar-toggle.is-closed {
     transform: translateX(0.3em) rotate(0deg);
}
 .sidebar-toggle .icon {
     font-size: 1.5rem;
     color: #fff;
}
 .sidebar {
     width: 15em;
     height: 100vh;
     background-color: #333;
     transition: 0.7s;
}
 .sidebar.is-closed {
     transform: translateX(-16em);
}
.card {
  border:
    3px       /* width */
    solid     /* style */
    magenta;  /* color */background-color: #333;
    width: auto;
    height: 50px;
}

<div class="sidebar">
  <button class="sidebar-toggle"><i class="fa fa-plus icon"></i></button>
текс
</div>
<div class="card">
меню
</div>

Answer 1

Необходимо устанавливать сайдбару высоту вычитая высоту меню. Это можно сделать с помощью функции calc() в css. Например:

height: calc(100vh - 50px)

Функции в css чувствительны к пробелам, поэтому необходимо обязательно перед и после минуса ставить пробелы, иначе функция не заработает.

БЛОГ НА HUSL

Как зафиксировать sidebar, чтобы он не уходил за нижнее меню

Ответы (1 шт):