Material Dashboard 2(免费版本)的边栏页脚(按Creative Tim )

Question

在Creative Tim的Material Dashboard 2 (free version)的demo中，侧边栏的页脚占据了相当大的空间(高达360px )，如果浏览器窗口不够高，一些菜单项将无法显示。

我有没有可能去掉页脚？

我可以从导航项目的CSS类中看到，影响的属性是：

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    height: calc(100vh - 360px);
}

然而，删除侧边栏的页脚(带有.sidenav-footer类的元素)没有任何帮助，360px高仍然占据着空间。如何让侧边栏页脚消失而不占用空间？有没有官方的CSS类可以做到这一点？

在official documentation中，它实际上并没有提到任何关于侧边栏的内容。

Answer 1

导航栏的大小由您提到的类.navbar-vertical.navbar-expand-xs .navbar-collapse决定，这些类分配给包含导航栏的ul的div。页脚只有80px高，而且页脚和导航栏之间只有空白。这与页脚的大小无关。相反，包含菜单项的div太小。

如果您希望div更大，可以更改它的高度值。现在，它被计算为查看器高度的100 %减去360px。将其更改为比360px更低的值。试试这个：

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    height: calc(100vh - 200px);
}

请注意，如果您使用的数字太小，低于190px (导航栏标题的高度+页脚的高度+导航栏的边距)，则导航栏项目可能会超出导航栏的区域。您可以在web检查器中找到这些高度值。