Question

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

问题是左侧的侧边栏菜单。

如果侧边栏菜单只有几个菜单项，则侧边栏会覆盖页面的整个高度并固定在页面上。如果菜单中有很多像我的菜单一样的选项，则侧边栏开始与页面一起移动就可以了，但是至少我需要将其拉伸到整个内容的高度。

因此，我正在尝试使侧边栏覆盖页面内容的整个高度。

侧边栏是在flex中设置的，所以我一直在尝试使用各种教程，我可以在设置侧边栏全高时找到它们，虽然有些，但是我似乎无法做到这一点工作。

当前，侧边栏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;
    }
}

CSS-Flex侧边栏-页面的完整高度-Weebly

1 个答案: