使用Materialize框架时页脚无法固定在底部，求排查解决

嘿，我碰到过好几个开发者遇到这个问题，咱们一步步排查并解决哈！你写的基础flex布局代码其实是Materialize官方推荐的核心，但可能还有几个容易忽略的点导致页脚没固定住：

1. 检查HTML结构的层级关系 #

要确保你的<main>标签是直接作为<body>的子元素，而且所有页面内容（除了header和footer）都必须放在<main>内部。如果中间多了一层额外的容器（比如用一个<div>把<main>包起来），flex布局的高度计算就会失效。

正确的结构示例：

<body>
  <header class="navbar">...</header> <!-- 可选的导航栏 -->
  <main>
    <!-- 所有页面内容都放在这里 -->
    <div class="container">...</div>
  </main>
  <footer class="page-footer green lighten-1">...</footer>
</body>

2. 移除不必要的margin/padding干扰 #

有时候浏览器默认的样式或者你自己加的margin/padding会破坏高度计算：

• 给<body>添加重置样式，消除默认边距：

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

• 检查<main>内部的元素有没有设置margin-bottom，或者父级元素有没有overflow: auto这类属性，这些都可能导致高度计算异常。

3. 确认CSS加载顺序 #

一定要保证你的自定义CSS是在Materialize官方CSS之后加载的，否则你的flex样式可能会被框架的默认样式覆盖。HTML中的加载顺序应该是：

<!-- 先加载Materialize的CSS -->
<link rel="stylesheet" href="path/to/materialize.css">
<!-- 再加载你的自定义样式 -->
<link rel="stylesheet" href="path/to/your-styles.css">

4. 特殊情况：使用固定导航栏时的调整 #

如果你用了navbar-fixed类的导航栏，Materialize会自动给<body>添加padding-top，这时候需要调整min-height的计算，避免页脚被挤下去：

body {
  display: flex;
  min-height: calc(100vh - 64px); /* 64px是Materialize默认导航栏的高度，根据你的实际情况调整 */
  flex-direction: column;
  padding-top: 64px; /* 和导航栏高度一致 */
}

完整可运行示例 #

你可以对照这个示例检查自己的代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <style>
    body {
      margin: 0;
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    main {
      flex: 1 0 auto;
    }
  </style>
</head>
<body>
  <nav class="nav-wrapper green">
    <a href="#" class="brand-logo center">Demo Site</a>
  </nav>

  <main>
    <div class="container">
      <h2 class="center-align">Page Content</h2>
      <p>即使这里内容很少，页脚也会固定在页面底部哦！</p>
    </div>
  </main>

  <footer class="page-footer green lighten-1">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Footer Title</h5>
          <p class="grey-text text-lighten-4">这里是页脚的内容区域</p>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2024 Demo Copyright
      </div>
    </div>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Jens O. Anders Olsén