包含 footer.php 时的粘性页脚

Question

我想知道如何让页脚贴在页面底部，无论页面有多长。我会在每个页面的底部使用 include('footer.php') 来包含我的 footer.php 文件。我已经搜索了一个很好的答案，但没有找到任何有用的东西，因为每个教程都假设您在每个页面上都制作了页脚，而不是包含它。有谁知道 CSS 我必须使用什么才能做到这一点？

页脚 HTML:

<html>
   <body>

      <footer>This is my footer</footer>

   </body>

</html>

Index.php 示例：

<html>
   <head>

      <?php
      include('nav.php');
      ?>  

   </head>

   <body>

      <p>Blah blah blah</p>

      <?php
      include('footer.php')
      ?>   

   </body>

</html>

谢谢

Answer 1

我认为您的 footer.php 文件应该只包含页脚元素及其内容：

<footer>...</footer>

然后添加到您的 css:

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; // or any suitable height
    display: block;
}
html {
    position: relative;
    min-height: 100%;
}

Answer 2

我不确定，但您可能还需要在页面内容底部包含白色 space，以避免部分内容被页脚遮挡。

Answer 3

我不认为你可以关闭和打开正文和 html 两次，当你这样做时 html 页面就是这样的：

<html>
<head>

  <?php
  include('nav.php');
  ?>  

</head>

<body>

  <p>Blah blah blah</p>

  <html>
  <body>

     <footer>This is my footer</footer>

   </body>

  </html>   

  </body>

</html>

所以你应该像这样制作页脚：

<footer>This is my footer</footer>

</body>

</html>

你的 html 页面是这样的：

<html>
<head>

  <?php
  include('nav.php');
  ?>  

  </head>

   <body>

  <p>Blah blah blah</p>

  <?php
  include('footer.php')
  ?>

如果我理解正确，你的 css 应该包含 position:fixed，你可以在这里阅读：https://www.w3schools.com/cssref/pr_class_position.asp

包含 footer.php 时的粘性页脚

Sticky footer when including footer.php

html

css

php

sticky-footer