页脚到页面底部答案

【问题标题】：Footer to the bottom of page页脚到页面底部
【发布时间】：2017-12-05 08:22:08
【问题描述】：

我想在页面底部创建一个页脚，无论是在内容很少的情况下还是在内容很少的情况下。

我已经学习了几个教程，但要么不起作用，要么没有给出想要的结果，也许我尝试了一些错误。

有人可以帮助我吗？谢谢

编辑：这是我的代码

页面的 HTML

<html>
    <head>
        <title>
            Test Pagina Vuota Footer
        </title>
        <style type="text/css">
            html, body, .container {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: green;
                color: white;
            }
            .container {
                padding-top: 97px;
            }
        </style>
        <script src="/inc/jquery.js"></script>
        <script src="/inc/sticky-footer.js"></script>
    </head>
    <body>
        <div class="container">

            <? include("./inc/navbar"); ?>

            <div class="content">
                content of page
            </div>


        <?php include("./inc/footer"); ?>
        </div>
    </body>
</html>

页脚的HTML

<html>
    <head>
        <title>
            /inc/footer
        </title>
        <meta name="description" content="Footer del sito">
        <style type="text/css">
            .footer {
                width: 100%;
                background-color: orange;
                color: white;
            }
        </style>
        <script src="/inc/jquery.js"></script>
        <script src="/inc/footer.js"></script>
    </head>
    <body>
        <div class="footer">
            &copy; ************.altervista.org 2017
        </div>
    </body>
</html>

JS 文件

// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() { 

       var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");

       positionFooter();

       function positionFooter() {

                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";

               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }

       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)

});

【问题讨论】：

你能分享你的代码吗？
你需要给我们看一些代码。您的意思是希望它位于页面底部（粘性），还是无论滚动多远（固定）都始终在视口底部可见？
请在您遇到问题的地方发布代码
我想要粘性页脚
你想要这样的stackoverflow.com/q/643879/2563833

标签： javascript jquery html css footer

【解决方案1】：

最适合flex的方式可能是在.container上使用display: flex; flex-direction: column; min-height: 100vh;，并在.footer上设置margin-top: auto，这样它就会将自己推到flex父级主轴的末端。

您还应该从页脚包含中删除所有<html><body> 结构性内容，尤其是您已经包含在页面上的捆绑脚本，例如 jquery。您只需要页脚本身的元素。

html, body, .container {
  margin: 0;
  padding: 0;
}
body {
  background-color: green;
  color: white;
}
.container {
  padding-top: 97px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}
.footer {
  background-color: orange;
  color: white;
  margin-top: auto;
}

<div class="container">

  <nav>nav</nav>

  <div class="content">
    content of page
  </div>

  <div class="footer">
    &copy; ************.altervista.org 2017
  </div>
  
</div>

【讨论】：

所以在页面包含的文件中我只需要放置页脚代码而不创建包含的真实页面？
@Takabrycheri 对。您只需要在页面上使用一次<html><body><title><head>。您的包含文件应该只是页脚代码的 html。无需在已经有<html><body> 等的页面中嵌套<html><body> 等。如果您包含的 JS 是创建粘性页脚，我认为如果我的 CSS 解决方案适用于您不需要它你。您的主 html 上还缺少 <!doctype html>。应该是文档的第一行（<html>上方）
哦，好吧，我想我必须放仅在 HTML 文件中，而这是我不知道必须放入的 PHP。
现在我试试 :)
@Takabrycheri 您的 PHP 只是将 HTML 输出到浏览器，因此您需要添加 doctype，因为浏览器看不到您的任何 PHP - 它只看到 PHP 吐出的 HTML 文档.而 HTML 文档需要 doctype。

【解决方案2】：

有很多方法可以做到这一点。一种简单的方法是确保页脚上方的内容具有整个屏幕的最小高度减去页脚的高度。

<div id="content" style="min-height: calc(100vh - 50px);"> 
    Your content goes here.
</div>
<div id="footer" style="height: 50px"> 
    Your footer goes here.
</div>

【讨论】：