CSS

Question

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

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

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

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

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

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

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

我该如何解决这个问题？

Answer 1

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

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

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

CSS - Flex Sidebar - full height of the page - Weebly

html

flexbox

weebly