html - CSS - Flex 边栏 - 页面的全高 - Weebly

Question

我一直在 Weebly 网站上工作:https://testerbuyer.weebly.com/

问题出在左侧的侧边栏菜单上。

如果侧边栏菜单只有几个菜单项，侧边栏会覆盖页面的整个高度并粘在页面上。如果菜单有很多像我这样的元素，侧边栏开始随页面移动完全没问题，但至少我需要将它拉伸(stretch)到内容的全高。

所以我试图让侧边栏覆盖页面内容的整个高度。

侧边栏是在 flex 中设置的，所以我一直在尝试使用我能找到的各种关于设置侧边栏全高的教程，有一些，但我似乎无法做到工作。

目前侧边栏的 min-height 属性设置为 100vh。

我一直在尝试 min-height: 100%, flex: 1; 似乎没有什么可以拉伸(stretch)它的全高。

我该如何解决这个问题？

Answer 1

我已经在下面编辑了您的一些 CSS 代码，首先我将 position absolute 重写为 fixed，将 min-height 重写为 height，然后添加 overflow 滚动属性，希望您的问题得到解决。

@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;
    }
}