html - 实现页脚不会留在底部?

标签 html css materialize

我在我的网页上使用了 Materialize,由于某些原因,即使我为此使用了 Materialize 自己推荐的 CSS,页脚也不会留在底部。我错过了什么吗?

这是 CSS:

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

main {
  flex: 1 0 auto;
}

这是页脚的 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>

最佳答案

问题已解决。

没有使用主标签。

<body>

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

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

关于html - 实现页脚不会留在底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50209365/

相关文章:

html - "Internal Server Error"Dreamweaver cc 2018

javascript - 在选择时更改文本区域的边框颜色

java - 刚开始接触 Java,我想我需要包含新的类。

html - Firefox 单选按钮不检查?

css - HTML 和 CSS : On hover display div

html - CSS div 大小问题

javascript - 使用 .dropdown() 实现错误下拉菜单 - $ 不是函数

css - Materialise CSS 导航栏搜索已损坏

javascript - 以编程方式选择一个选项 - Materialize css

javascript - 替换 html 标签中以某些文本开头的制表符和换行符