Question

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

我已经在<header><main><footer>布局中获得了我的HTML，但也许我错过了什么？我已经包含了我的基本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中进行去抖动的内容。

Materialize CSS Footer不会表现为Fixed

1 个答案: