CSS - Flex Sidebar - полная высота страницы - Weebly

Question

Я работал на веб-сайте Weebly: https://testerbuyer.weebly.com/

Проблема заключается в боковом меню слева.

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

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

Боковая панель настроена на flex, поэтому я пытался использовать всевозможные учебные пособия, которые я мог найти при настройке полной высоты боковой панели, есть несколько, но я просто не могу это сделать работа.

В настоящее время для свойства sidebars min-height установлено значение 100vh.

Я пытался min-height: 100%, flex: 1;, кажется, ничто не может растянуть его на полную высоту.

Как я мог это исправить?

Answer 1

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

@media screen and (min-width: 64.0625em){
    body.nav-position-sidebar .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        padding: 40px;
        border-bottom: none;
        /* display: flex; */
        /* flex-direction: row; */
        overflow: auto;
    }
}