Question

是否有办法将页脚保持在页面底部，即使没有很多内容？我按照“实体化”页面上的说明操作，将所有HTML放在<header>，<main>和<footer>标记之间。我根本没有将任何自己的CSS应用到页脚。

任何帮助都将不胜感激。

这是我的HTML：

<body>
  <header>
    <nav role="navigation">
      <div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo">Some Title <i class="material-icons left hide-on-med-and-down">apps</i></a>
        <ul id="dropdown" class="dropdown-content">
          <li><a href="">Register</a></li>
          <li class="divider"></li>
          <li><a href="">Sign In</a></li>
        </ul>
        <ul class="right hide-on-med-and-down">
          <li id="timer-tab"><a href="">Tab 1</a></li>
          <li id="stats-tab"><a href="">Tab 2</a></li>
          <li id="graphs-tab"><a href="">Tab 3</a></li>
          <li><a href="" data-activates="dropdown" class="dropdown-button">Tab 4<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
      </div>
    </nav>
  </header>

  <main>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </main>

  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Some Title</h5>
          <p class="grey-text text-lighten-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col l2 offset-l2 s6">
          <h6>About</h6>
          <ul>
            <li><a href="" class="grey-text text-lighten-3">Help</a></li>
            <li><a href="" class="grey-text text-lighten-3">Contact</a></li>
            <li><a href="" class="grey-text text-lighten-3">Suggestions</a></li>
          </ul>
        </div>
        <div class="col l2 s6">
          <h6>Developer</h6>
          <ul>
            <li><a href="" class="grey-text text-lighten-3">Source</a></li>
            <li><a href="" class="grey-text text-lighten-3">Contribute</a></li>
            <li><a href="" class="grey-text text-lighten-3">API Docs</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">Made by <a href="">Me </a></div>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="/js/materialize.min.js"></script>
  <script src="/js/bundle.js"></script>
</body>

Answer 1

根据materializecss：必须将以下规则添加到您的CSS中以获取粘性页脚：

output

Jsfiddle

Answer 2

只是补充一点，亚历克斯的答案很有效，因为你有这个结构：

<body>
<!-- Header content -->
<main>Page Content</main>
<!-- Footer content --> 
</body>

Answer 3

只需在页脚元素处添加此样式： position：fixed; bottom：0; left：0; width：100％; 。

例如：

<footer class="page-footer" style="position:fixed;bottom:0;left:0;width:100%;">
    ...
</footer>

Answer 4

以防万一有人在使用物化反应，我也遇到了由根div引起的相同问题，因此，与其为主体分配显示柔韧性更改为

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

根是直接父级。

Answer 5

我还根据https://materializecss.com/footer.html

使用正确的实现格式

但是在IE浏览器中。它不能正常工作，但是，如果您还添加以下样式：style =“ position：fixed; bottom：0; left：0; width：100％;”没关系。

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

<!DOCTYPE html>
<html lang="en">
    <head>
    
    </head>
    <body>
        <header>
        </header>

        <main>
        </main>
        
        <footer style="position:fixed;bottom:0;left:0;width:100%;">
        </footer>
    </body>
</html>

物化页脚不会到页面底部

5 个答案: