页脚到页面底部

Question

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

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

谁能帮帮我？谢谢

编辑：这是我的代码

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)

});

Answer 1

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

<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>

Answer 2

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

您还应该从页脚中删除所有 <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>

页脚到页面底部

Footer to the bottom of page

html

javascript

css

jquery

footer