使用Materialize CSS创建Navbar与Footer之间的Sidebar问题求助

步骤1：调整页面基础结构 #

采用flex纵向布局控制整体页面层级，确保中间内容区域自动占据导航栏和页脚之间的全部空间：

<body class="page-frame">
  <!-- 导航栏 -->
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
    </div>
  </nav>

  <!-- 中间内容容器 -->
  <div class="content-area">
    <!-- 侧边栏 -->
    <ul id="sidebar" class="sidenav sidebar-fixed">
      <li><a href="#!">第一项</a></li>
      <li><a href="#!">第二项</a></li>
      <li><div class="divider"></div></li>
      <li><a href="#!">第三项</a></li>
    </ul>
    <!-- 右侧主内容 -->
    <div class="main-content">
      页面主体内容区域
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="page-footer">
    <div class="footer-copyright">
      <div class="container">
        © 2024 版权信息
      </div>
    </div>
  </footer>
</body>

步骤2：添加自定义样式覆盖默认配置 #

Materialize 默认侧边栏为全屏fixed定位，需要通过自定义CSS限制其高度与定位范围：

/* 页面整体框架布局 */
.page-frame {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
}
/* 中间内容区域自动填充剩余高度 */
.content-area {
  flex: 1 0 auto;
  display: flex;
  overflow: hidden;
}
/* 侧边栏自定义样式 */
.sidebar-fixed {
  position: relative;
  transform: translateX(0) !important; /* 常驻显示无需滑动触发可保留该配置 */
  height: 100% !important;
  top: unset !important;
  box-shadow: none;
}
/* 主内容区域样式 */
.main-content {
  flex-grow: 1;
  padding: 2rem;
  overflow-y: auto;
}

步骤3：侧边栏JS初始化 #

document.addEventListener('DOMContentLoaded', function() {
  var sidenavElems = document.querySelectorAll('.sidenav');
  M.Sidenav.init(sidenavElems, {
    edge: 'left',
    draggable: false
  });
});

注意事项 #

• 如果需要保留侧边栏抽屉式滑动呼出效果，删除.sidebar-fixed中transform: translateX(0) !important配置，额外添加top: [你的导航栏高度] !important、height: calc(100vh - [导航栏高度] - [页脚高度]) !important即可
• 不要给侧边栏添加Materialize自带的fixed类，该类会强制设置全局fixed定位，导致高度不受父容器限制

内容的提问来源于stack exchange，提问作者greents