Question

我尝试使用MaterialiseCSS创建一个页面，但我对页脚有问题，看看她是怎么看的：http://prntscr.com/fvbhn1

我想要压下页脚。

当前的CSS：

         .page-footer {
            padding-top: 20px;
            background-color: #ee6e73;
            padding-left: 0px;
          }

我试过

.page-footer {
padding-top: 20px;
background-color: #ee6e73;
padding-left: 0px;
position: fixed;
bottom: 0;
left: 0;
}

但是当我用手机打开时，我看不到页面容器：http://prntscr.com/fvbkhf

Answer 1

问题可能是你没有使用flexbox来构建你的html。

注意：我们使用flexbox构建html，以便页脚始终位于页面底部。将页面结构保留在3个HTML5标记中非常重要：<header>，<main>，<footer>

引用来源：http://materializecss.com/footer.html

为了拥有粘性页脚，您需要将此代码段中的CSS添加到CSS文件中，并维护materializecss footer的标准结构：

＆＃13;

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css" rel="stylesheet"/>
 <div class="container">
        <h3>Page content</h3><h3>...</h3>
      </div>
 
 
 
 <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>

＆＃13;

固定Materialisecss的页脚

1 个答案: