实现页脚不会进入页面底部答案

【问题标题】：Materialize footer not going to bottom of page实现页脚不会进入页面底部
【发布时间】：2016-02-25 01:49:28
【问题描述】：

有没有办法让页脚保持在页面底部，即使内容不多？我按照 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>

【问题讨论】：

我可以要你的css吗？
当然，但我并没有真正做太多 CSS。我只是在使用 materialize.min.css 和 this。

标签： html css footer materialize

【解决方案1】：

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

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

Jsfiddle

【讨论】：

小提琴有帮助。我的问题是在容器内使用
，而在 main.
内使用页脚
@Lucky 能给我一个演示吗？
由于某种原因，我的 HTML 结构正确，并且在您的示例中使用了确切的 CSS，但页脚仍然不会设置为页面底部！？

【解决方案2】：

补充一点，Alex 的答案很完美，因为你有这个结构：

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

【讨论】：

【解决方案3】：

只需在页脚元素处添加以下样式：position:fixed;bottom:0;left:0;width:100%;。

例如：

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

【讨论】：

我会向使用 Materialize CSS 的人推荐 Alex 的答案，而不是固定定位。在非常短的视口上，固定位置的方法可以完全掩盖您的内容。通过使用 flex 容器，页脚的高度被考虑到页面的整体高度，并保持在内容下方。

【解决方案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>

【讨论】：

【解决方案5】：

以防万一有人使用物化反应，我遇到了由根 div 引起的相同问题，所以不要分配带有显示 flex 的主体，而是将其更改为

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

根是直接父级。

【讨论】：