Materialise CSS 页脚将不会像 Fixed 那样工作

Question

我正在为我的 Django 应用程序的前端使用物化 css 框架。除了一种行为外，一切都很好。我希望页脚位于屏幕底部（不是页面 - 我想要固定页脚，而不是粘性页脚）。

我的 html 在 <header><main><footer> 布局中，但也许我遗漏了什么？我包含了我的基本 html 模板。我不太确定哪里出了问题，或者我现在应该调整什么！

请注意：我使用的是 Materialise 1.0 Alpha。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title> See List | app</title>

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="E:/code/app/app/static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="E:/code/app/app/static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<style>
    .disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
    }
    .container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

    table.highlight tbody tr:hover {
    background-color: #fffaef !important;
    }

    .row {
    width: 100%;
    }

    th.result td.result {
    border-left-style: solid;
    border-left-color: #eee;
    border-left-width: 1px;
    }

    table.striped > tbody > tr.winner{
    background-color: #d0edbd;
    }
    table.striped > tbody > tr:nth-child(odd).winner{
    background-color: #d5f4c1;
    }

</style>

</head>


<body>
<header>

<ul id="script-dropdown" class="dropdown-content">
        <li><a class="disabled" href="#">Scripts</a></li>
          <li><a href="/app/run/get_games/">Get</a></li>
          <li><a href="/app/run/add_openers/">Add Opening</a></li>
          <li><a href="/app/run/add_closing/">Add Closing</a></li>
          <li><a href="/app/run/close_games/">Close</a></li>
          <li><a class="disabled" href="/app/run/movement/">Rerun</a></li>
        </ul>
<div class="navbar-fixed">
  <nav class="deep-purple darken-4" role="navigation">


    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo" ><i class="material-icons left">casino</i>
APP
</a>


      <ul class="right hide-on-med-and-down ">
          <li><a href="#"></a></li>
          <li><a class="dropdown-trigger" href="#!" data-target="script-dropdown">Scripts<i class="material-icons left">code</i></a></li>

          <li><i class="material-icons left">access_time</i>Sunday, 21 January 2018 18:09 EST</li>

      </ul>

    </div>
  </nav>
</div>


</header>
<main>
 <div class="container" style="width: 90%; max-width: none;">
        <div class="row">
            <div class="col s12 valign center-block">
                <h2 class="center-align">Filters Go Here</h2>
            </div>
            <div class="row">
                <div class="col s12 m12 l12">
                    <table class="striped responsive-table highlight">
                        <thead>
                        <tr>
                        </tr>
                        </thead>
                        <tbody>

                            <tr >
                            </tr>

                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>

</main>



  <footer class="page-footer teal darken-4">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">To the Admin Site</h5>

        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Lists</h5>
          <ul>

          </ul>
        </div>
        <div class="col l3 s12">
        <h5 class="white-text">Scripts</h5>
          <ul>


          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      Made by jenni
      </div>
    </div>
  </footer>
</body>

  <!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="E:/code/app/app/static/js/materialize.js"></script>
  <script src="E:/code/app/app/static/js/init.js"></script>

<script>

    $(document).ready(function(){
      $(".dropdown-trigger").dropdown();


          });
</script>

Answer 1

你的问题中有一些变量，例如init.js或style.css的内容。我试图重现您的示例，用 CDN 链接替换本地链接，我想这就是您要查找的内容：

.page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

这会将您的页脚放在浏览器视口的底部，页面其余部分的上方。这就是为什么您需要使用等于页脚高度的 padding-bottom 值来容纳页面。您想在 window.load 事件和 window.resize 上执行此操作（因为您希望每次页脚更改高度时更新正文的底部填充）：

$(window).on('load resize', function(){
  $('body').css({paddingBottom:$('footer').outerHeight() + 'px'})
})

如果不是为了响应，这一切都很好。您真的不想在移动设备上使用 position:fixed 元素。屏幕足够小，无需用页脚覆盖它。因此，让我们通过将 CSS 包装成 @media 条件并将相同的条件添加到 JS 来更改上述内容：

@media (min-width: 768px) and (min-height: 500px) {
  .page-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}

$(window).on('load resize', function() {
  $('body').css({paddingBottom: $(window).width() >= 768 && $(window).height() >= 500 ?
      $('footer').outerHeight() + 'px' : 
      '0'
  })
})

工作示例：

$(document).ready(function() {
  $(".dropdown-trigger").dropdown();
});
$(window).on('load resize', function() {
  $('body').css({paddingBottom: $(window).width() >= 768 && $(window).height() >= 500 ?
      $('footer').outerHeight() + 'px' : 
      '0'
  })
})

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

table.highlight tbody tr:hover {
  background-color: #fffaef !important;
}

.row {
  width: 100%;
}

th.result td.result {
  border-left-style: solid;
  border-left-color: #eee;
  border-left-width: 1px;
}

table.striped>tbody>tr.winner {
  background-color: #d0edbd;
}

table.striped>tbody>tr:nth-child(odd).winner {
  background-color: #d5f4c1;
}
@media (min-width: 768px) and (min-height: 500px) {
  .page-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}

<!DOCTYPE html>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection" />

<header>
  <ul id="script-dropdown" class="dropdown-content">
    <li><a class="disabled" href="#">Scripts</a></li>
    <li><a href="/app/run/get_games/">Get</a></li>
    <li><a href="/app/run/add_openers/">Add Opening</a></li>
    <li><a href="/app/run/add_closing/">Add Closing</a></li>
    <li><a href="/app/run/close_games/">Close</a></li>
    <li><a class="disabled" href="/app/run/movement/">Rerun</a></li>
  </ul>
  <div class="navbar-fixed">
    <nav class="deep-purple darken-4" role="navigation">

      <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo"><i class="material-icons left">casino</i>
    APP
    </a>


        <ul class="right hide-on-med-and-down ">
          <li>
            <a href="#"></a>
          </li>
          <li><a class="dropdown-trigger" href="#!" data-target="script-dropdown">Scripts<i class="material-icons left">code</i></a></li>
          <li><i class="material-icons left">access_time</i>Sunday, 21 January 2018 18:09 EST</li>
        </ul>
      </div>
    </nav>
  </div>
</header>
<main>
  <div class="container" style="width: 90%; max-width: none;">
    <div class="row">
      <div class="col s12 valign center-block">
        <h2 class="center-align">Filters Go Here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="row">
        <div class="col s12 m12 l12">
          <table class="striped responsive-table highlight">
            <thead>
              <tr>
              </tr>
            </thead>
            <tbody>
              <tr>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</main>
<footer class="page-footer teal darken-4">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">To the Admin Site</h5>

      </div>
      <div class="col l3 s12">
        <h5 class="white-text">Lists</h5>
        <ul>

        </ul>
      </div>
      <div class="col l3 s12">
        <h5 class="white-text">Scripts</h5>
        <ul>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      Made by jenni
    </div>
  </div>
</footer>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

注意：在生产环境中，您希望消除绑定到 resize 事件的任何代码的执行。在 David Corbacho 的 excellent article 中有更多关于去抖动的内容。

Materialise CSS 页脚将不会像 Fixed 那样工作

Materialize CSS Footer will not behave as Fixed

css

footer

django-templates

materialize