我想要一个无论内容多少都始终可见的物化页脚。

Question

正文应该是可滚动的，但页脚应该是固定的。

    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Footer Content</h5>
            <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        © 2014 Copyright Text
        <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
        </div>
      </div>
    </footer>

我用了这个，但是页脚停留在底部，我只能滚动整个正文才能看到它。我希望页脚始终可见。

Answer 1

假设您想要 "sticky footer"，这意味着对于有限数量的内容（没有滚动），页脚将显示，您可以关注 link Dave Hearne 发布的帖子。

我相信您的问题有所不同，无论有多少可用内容，您都希望页脚显示。这是一个解决方案：（请将其添加到您的 css 文件）

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

main {
 flex: 1;
}

footer{
position: fixed;
right: 0;
left: 0;
bottom: 0;
}

我想要一个无论内容多少都始终可见的物化页脚。

I want a materialize footer which is always in view irrespective of amount of content.

css

materialize