Footer to the bottom of page

Question

I would like to create a footer that is at the bottom of the page, both in the case of little content and in case there is very little.

I have already followed several tutorials but either do not work or do not give the desired result, maybe I've tried something wrong.

Anyone can help me? Thank you

EDIT: here it's my code

HTML of page

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

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

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

});

You need to show us some code. And do you mean you want it to be on the bottom of the page (sticky), or always visible at the bottom of the viewport regardless how far you're scrolled (fixed)? — Michael Coker, Jul 01 '17 at 14:58
Do you want something like this https://stackoverflow.com/q/643879/2563833 — Arghya C, Jul 01 '17 at 15:04
Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Daniel Beck, Jul 01 '17 at 15:04

score 3 · Accepted Answer · answered Jul 01 '17 at 15:33

3

The most flexible way is probably to use display: flex; flex-direction: column; min-height: 100vh; on .container, and set margin-top: auto on .footer so it will push itself to the end of the flex parent's main axis.

You should also remove all of the <html><body> structural stuff from your footer include, especially bundling scripts that you've already included on the page, like jquery. You only need the elements for the footer itself.

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>

answered Jul 01 '17 at 15:33

Michael Coker

52,626
5
64
64

So in the files included on the page I just have to put the footer code without creating a real page that is included? – Takabrycheri Jul 01 '17 at 15:36
@Takabrycheri right. You only need `` on the page once. Your include files should just be the html for the footer code. No need to nest ``, etc in a page that already has ``, etc. And if that JS you're including is to create the sticky footer, I don't think you need it if my CSS solution works for you. You're also missing ` ` on your main html. It should be the first line of the document (above ``) – Michael Coker Jul 01 '17 at 15:38
Oh ok, I thought I had to put <! Doctype html> only in HTML files, while this being PHP I did not know had to be put. – Takabrycheri Jul 01 '17 at 15:44
Now I try it :) – Takabrycheri Jul 01 '17 at 15:50
@Takabrycheri your PHP is simply outputting HTML to the browser, so you need to add the doctype because the browser doesn't see any of your PHP - it only sees the HTML document the PHP is spitting out. And HTML documents require the doctype. – Michael Coker Jul 01 '17 at 15:53
Thanks for helping me :) – Takabrycheri Jul 01 '17 at 16:45

score 1 · Answer 2 · answered Jul 01 '17 at 15:00

There are many many ways to do this. One easy way is to make sure the content above the footer has a minimum height of the whole screen minus the height of the footer.

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

Footer to the bottom of page

2 Answers2