物化页脚不会到页面底部

Question

有没有办法将页脚保持在页面底部，即使没有很多内容？我按照Materialise页面上的说明操作，将所有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>

物化页脚不会到页面底部

问题描述投票：10回答：4

4个回答

最新问题

物化页脚不会到页面底部

问题描述 投票：10回答：4

4个回答

最新问题

问题描述投票：10回答：4