Materialize.css：如何移除main与footer之间的空白间隙？

我来帮你搞定这个头疼的空白问题！既然你已经通过Chrome控制台定位到空白是main元素本身占据的，那咱们从Materialize的默认样式特性入手，逐个排查解决：

1. 检查并覆盖main的min-height默认值 #

Materialize为了实现footer固定在页面底部的布局，默认会给main元素设置min-height（通常是基于视口高度计算的，比如calc(100vh - 头部高度 - 底部高度)）。如果你的页面内容长度不够，main会被强制拉长到这个最小高度，从而在底部产生空白。

解决方法：根据你的需求调整这个值，比如不需要强制拉长的话，直接覆盖：

main {
  min-height: auto !important;
}

如果还是要footer固定，但不想留空白，可以手动计算合适的min-height：

/* 假设头部高64px，footer高50px，根据实际情况修改数值 */
main {
  min-height: calc(100vh - 64px - 50px) !important;
}

2. 移除main内部最后一个元素的margin-bottom #

Materialize的.row类默认带有margin-bottom: 2rem（约20px），如果这个row是main的最后一个子元素，它的外边距可能会被计算进main的高度范围里（尤其是当main没有设置overflow:hidden时）。

解决方法：给最后一个row添加Materialize内置的mb-0类，直接移除底部外边距：

<div class="row mb-0">
  <!-- 这是main里的最后一行内容 -->
</div>

或者自定义CSS覆盖：

main .row:last-child {
  margin-bottom: 0 !important;
}

3. 确认main的padding-bottom已完全移除 #

虽然你说已经移除了内边距，但可能Materialize的默认样式优先级更高，导致你的修改没生效。可以在Chrome控制台的Elements面板里查看main的padding-bottom计算值，如果还有数值，用CSS强制覆盖：

main {
  padding-bottom: 0 !important;
}

4. 检查main的伪元素是否占空间 #

有些情况下，第三方样式或自定义代码会给main添加::before/::after伪元素，这些伪元素可能会占据高度产生空白。在控制台的Elements面板里展开main的伪元素项，查看是否有高度或padding/margin，有的话直接清除：

main::before, main::after {
  content: none !important;
}

按照上面的步骤排查，应该就能解决你遇到的空白问题啦！

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