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

最flex种方式可能是在display: flex; flex-direction: column; min-height: 100vh;上使用.container，并在margin-top: auto上设置.footer，因此它会将自己推向最后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>

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

页脚底部的页脚

2 个答案: