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

假设您想要一个“粘性页脚”，这意味着对于有限的内容（不滚动），页脚将显示，您可以点击Dave Hearne发布的链接。

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

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

main {
 flex: 1;
}

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

我想要一个物化的页脚，无论内容多少，该页脚始终处于可见状态。

1 个答案: