如何移除免费版Material Dashboard 2的侧边栏footer并释放占用空间

问题根因 #

你移除侧边栏footer元素后空间仍被占用，是因为默认样式中.navbar-vertical.navbar-expand-xs .navbar-collapse的高度规则硬编码了calc(100vh - 360px)，其中的360px是提前为侧边栏footer预留的高度，该规则不会随着footer元素被移除自动调整，因此会一直占用这部分空间。

解决方案 #

• 第一步：完全移除HTML中所有带.sidenav-footer类的元素
• 第二步：添加自定义CSS覆盖默认样式，确保自定义样式引入顺序晚于Material Dashboard的默认样式表，优先级足够覆盖原有规则：

/* 调整侧边栏可滚动区域高度，减去顶部logo栏高度即可（64px为默认顶部logo栏高度，可根据实际布局调整） */
.navbar-vertical.navbar-expand-xs .navbar-collapse {
    height: calc(100vh - 64px);
    overflow-y: auto;
}
/* 清除侧边栏底部为footer预留的内边距 */
.navbar-vertical {
    padding-bottom: 0;
}

• 如果仅需要在部分页面移除侧边栏footer，可给对应页面的<body>标签添加自定义类如.without-sidenav-footer，将CSS选择器调整为.without-sidenav-footer .navbar-vertical.navbar-expand-xs .navbar-collapse即可，避免影响其他页面布局。

官方类说明 #

Material Dashboard 2免费版暂未提供官方预设的移除侧边栏footer的专用CSS类，该组件默认配置为携带侧边栏footer，官方文档也未覆盖该自定义场景的说明，需通过上述自定义CSS方式实现需求。

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