实现页脚不会到达页面底部

Question

有没有办法让页脚保持在页面底部，即使内容不多？我按照 Materialize 页面上的说明进行操作，并将我所有的 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 以获得粘性页脚：

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

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

我还根据以下内容使用了正确的具体化格式：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>

Answer 5

以防万一有人使用 react with materialize，我遇到了由 root div 引起的相同问题，所以不要将 body 分配给 display flex，而是将其更改为

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

根是直接父级。

实现页脚不会到达页面底部

Materialize footer not going to bottom of page

html

css

footer

materialize