Создайте фиксированную боковую панель и фиксированную строку меню с помощью css / html с «выбранной браузером шириной / высотой»

Question

Я хочу создать фиксированную боковую панель и фиксированную строку меню и страницу содержимого, как в этом примере, с bootstrap:

Для меню бар, я использую следующее css (что работает)

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
}

Но что css я должен использовать для боковой панели? Потому что я не знаю высоту строки меню (и я не хочу устанавливать ее явно, но пусть браузер выбирает). Как прикрепить боковую панель к нижней части строки меню?

.fixed-left {
  position: fixed;
  left: 0;
  z-index: 0;
  .... (how to set it fixed to the bottom of the menubar?)
}

Спасибо!

Answer 1

Изменить некоторые css в .fixed-left

.fixed-left {
  position: fixed;
  top: 0; // set it equal as the height of fixed-top 
  bottom: 0; // so that it will stick to bottom
  left: 0;
  z-index: 0;
  overflow-y: auto; // it will have the scroll if it has more content
  width: 250px; // set as per your requirement
}