Materalize页脚不停留在底部？

Question

Im using materialize for my webpage, and for some reason the footer won't stay at the bottom even though I use Materialize own recommended CSS for this. 我在网页上使用了Materialize，由于某种原因，即使我为此使用了Materialize自己推荐的CSS，页脚也不会停留在底部。 Am I missing something? 我想念什么吗？

Here's the CSS: 这是CSS：

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

main {
  flex: 1 0 auto;
}

And here's the HTML for the footer: 这是页脚的HTML：

<footer class="page-footer green lighten-1">
<div class="container">
    <div class="wrapper">

      <!--   Icon Section   -->
      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block">
            <h4 class="green-text" id="mailIcon"><i class="material-icons">mail</i></h4>
            <p class="white-text">info@storytourist.com</p>
          </div>
      </div>

        <div class="col s12 m4">
          <div class="icon-block">
            <h4 class="green-text" id="adressIcon"><i class="material-icons">map</i></h4>
            <p>Veldrom AB, Anckargripsgatan 3, 211 19 Malmö, Sweden</p>
          </div>
        </div>

        <div class="col s12 m4">
          <div class="icon-block">
            <h4 class="green-text" id="phoneIcon"><i class="material-icons">phone</i></h4>
            <p class="white-text">+46 720 427 346</p>
          </div>
        </div>
      </div>
</footer>

Answer 1

PROBLEM SOLVED. 问题解决了。

Didn't use a main tag. 没有使用主标签。

<body>

  <main>  //added 
     <div class="container">
     </div>
  </main>

  <footer> this is my footer </footer>
<body>

Answer 2

For sticking your footer to the botton add this to your css: 为了将页脚粘贴到botton，请将其添加到css：

.page-footer{
    position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}

The Complete CSS will be: 完整的CSS将是：

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

main {
  flex: 1 0 auto;
}


.page-footer{
    position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}

Materalize页脚不停留在底部？

问题描述

2 个解决方案

解决方案1
1 2018-05-07 11:54:54

解决方案2
0 2018-05-07 08:05:16

Reference 参考

Materalize页脚不停留在底部？

问题描述

2 个解决方案

解决方案1 1 2018-05-07 11:54:54

解决方案2 0 2018-05-07 08:05:16

Reference 参考

解决方案1
1 2018-05-07 11:54:54

解决方案2
0 2018-05-07 08:05:16