物化 CSS 侧边栏

Posted 2023-05-07

【中文标题】物化 CSS 侧边栏

【英文标题】：Materialize CSS Sidebar

【发布时间】：2021-11-25 14:14:47

【问题描述】：

我是物化 css 的新手，我坚持在导航栏和页脚之间创建侧栏。 这是我使用侧边栏时得到的

这就是我想要实现的

感谢您的帮助

【问题讨论】：

在这里分享您的代码！或创建 sn-p

对不起！这是代码：codepen.io/greents/pen/XWgLaoq

【参考方案1】：

您必须向侧边栏菜单添加一个 top 属性，其像素与顶部导航栏高度（在这种情况下为 64 像素）相同。

然后你可以添加一个计算出的高度减去 100% 与之前实现的top 像素 (64px) + 页脚高度 (50px)，结果是 114px

.sidenav.sidenav-fixed
    left: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    position: fixed;
    top: 64px;
    height: calc(100% - 114px);
   

【讨论】：

它工作！谢谢你的帮助