Materialize CSS如何设置页脚高度？实现固定底部并缩小高度

嘿，你的基础布局思路已经很对了——用Flex布局让页脚固定在底部的方案完全没问题！现在要缩小页脚高度，只需要调整页脚元素的内边距和内容的默认外边距就行，具体操作如下：

核心修改思路 #

你的现有CSS已经通过flex: 1 0 auto让main占满页面剩余空间，页脚自然固定在底部，这部分不需要改动。我们只需要针对页脚本身的样式做压缩：

• 减少页脚容器的上下内边距（Materialize的page-footer类默认有较大内边距）
• 去掉<p>标签的默认上下外边距（浏览器自带的样式会额外占用高度）

修改后的完整代码 #

HTML（无需改动）

<footer class="page-footer grey lighten-2">
  <div class="footer">
    <div class="row">
      <p id="updatedText" style="color:black"></p>
    </div>
  </div>
</footer>

CSS（新增页脚样式）

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

/* 自定义页脚样式，缩小高度 */
.page-footer {
  padding: 8px 0; /* 把默认上下内边距改小，可根据需求调整数值 */
  margin: 0; /* 清除额外外边距 */
}

.page-footer #updatedText {
  margin: 0; /* 移除p标签默认的上下外边距 */
  font-size: 14px; /* 可选：缩小字体进一步压缩高度 */
}

效果说明 #

• 调整.page-footer的padding是最直接的缩高方式，你可以根据视觉需求把8px改成更小或更大的数值。
• 移除<p>标签的默认margin能避免不必要的空白高度，让页脚内容更紧凑。
• 页脚依然会通过Flex布局固定在页面底部，不会因为高度缩小而改变位置。

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