使用Materialize CSS设置粘性页脚并调整高度至40-50px的方法

当然可以！你遇到的页脚下方出现空白的问题，主要是因为Materialize的页脚组件自带默认内边距，再加上内部文本标签的默认边距，导致实际高度超出了你设置的40px，或者布局出现错乱。下面分两种常见的粘性页脚场景给你解决办法：

一、先修正基础HTML结构 #

首先注意你代码里的栅格列写法有误（Materialize栅格最多12列，你写了col 16 s12），并且建议使用Materialize官方的.page-footer类来继承框架基础样式，避免冲突：

<footer class="page-footer white-text" style="background-color: #00bcd4;">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Lorem ipsum</h5>
        <p class="grey-text text-lighten-4">Lorem ipsum.</p>
      </div>
    </div>
  </div>
</footer>

二、场景1：固定在页面底部（始终可见，不随滚动消失） #

如果要让页脚一直固定在浏览器底部，不会被内容遮挡，用以下CSS：

/* 自定义固定高度的固定页脚 */
footer.page-footer {
  height: 40px;
  padding-top: 0; /* 移除Materialize默认的顶部内边距 */
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0;
}

/* 让内部容器和行占满页脚高度 */
footer.page-footer .container,
footer.page-footer .row {
  height: 100%;
  margin: 0;
}

/* 调整文本样式，垂直居中并适配高度 */
footer.page-footer h5,
footer.page-footer p {
  margin: 0;
  line-height: 40px; /* 让文字垂直居中 */
  font-size: 14px; /* 缩小字体避免溢出 */
}

/* 给body添加底部外边距，防止页面内容被页脚挡住 */
body {
  margin-bottom: 40px;
}

三、场景2：经典粘性页脚（内容少时贴底部，内容多时随滚动到底） #

这种场景下，页脚会在页面内容不足时贴在底部，内容足够长时就会被推到页面最下方，用flex布局实现：

/* 让html和body占满整个视口高度 */
html, body {
  height: 100%;
  margin: 0;
}

/* 把body设为flex容器，垂直排列元素 */
body {
  display: flex;
  flex-direction: column;
}

/* 让主内容区占满剩余空间，把页脚挤到底部 */
main {
  flex: 1 0 auto;
}

/* 自定义页脚高度 */
footer.page-footer {
  height: 40px;
  padding-top: 0;
  flex-shrink: 0; /* 防止页脚被压缩 */
  margin: 0;
}

/* 内部容器和文本的调整和场景1一致 */
footer.page-footer .container,
footer.page-footer .row {
  height: 100%;
  margin: 0;
}

footer.page-footer h5,
footer.page-footer p {
  margin: 0;
  line-height: 40px;
  font-size: 14px;
}

为什么你之前会出现空白？ #

你遇到的空白问题主要是这几个原因：

• 内部的h5和p标签有默认的上下边距，导致页脚实际高度超过了你设置的40px；
• 没有移除Materialize.page-footer默认的顶部内边距（默认约20px），叠加后总高度超出预期；
• 栅格列数写错（col 16 s12）导致布局错乱，出现额外空白。

按照上面的代码调整后，就能完美实现40px高度的粘性页脚啦！

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