Materialise CSS Footer 不会像 Fixed

Posted 2023-02-24

技术标签:

【中文标题】Materialise CSS Footer 不会像 Fixed【英文标题】：Materialize CSS Footer will not behave as Fixed 【发布时间】：2018-06-30 12:37:25 【问题描述】：

我正在为我的 Django 应用程序的前端使用物化 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>

【问题讨论】：

考虑添加框架的输出（进入浏览器的内容）。要获取它，只需在页面中右键单击“查看源代码”即可。其中一些是敏感的。我可以更新一些，但结构适合 3 个标签。让我看看我能不能抓住一个更简单的页面。当我说“输出”时，我并不是指整个来源。您仍然应该将其限制为minimal reproducible example。我建议的内容与您目前拥有的内容之间的区别在于，这里的任何人都可以验证（可检查），并且他们不需要您的框架来回答。不要忘记添加来自 CDN 的资源，以便在此处重现您的问题。这是负 51.5k 行。我想我可以把它拉得更远。 % load static % 和 % block jscripts %% endblock % 不是有效的 HTML。这是您的框架编译成有效 HTML 的东西。用它被解析的任何内容替换它。您可以查看页面源并从那里获取它。希望我说的很清楚。 【参考方案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 中了解更多关于去抖动的信息。

【讨论】：

谢谢！我在定位时遇到了麻烦：固定工作 - 底部：0 让我到达那里，其余的都非常有帮助。尽管客户声称他“永远不会在移动设备上使用它”，但我一直在构建响应能力，但我有一种感觉，这是一个谎言，我宁愿继续构建。

以上是关于Materialise CSS Footer 不会像 Fixed的主要内容，如果未能解决你的问题，请参考以下文章

升级 Materialise 1.0.0 -> 1.1.0

Materialise CSS Navbar Search 坏了

如何在 Materialise CSS 中使卡片的垂直高度不同？

如何制作 Materialise Jumbotron

css CSS Sticky Fixed Footer #CSS #footer #fixed

如何用css动态控制footer的位置