How can I force a footer to appear at the bottom of the visible window?

Design help General
1

I have a layout with a footer section. Many of my screens don’t have much depth in the content section so the footer is a stripe across the middle of the page. How can I force the content area to expand to a height that forces the footer to the bottom?

Any help would be appreciated!

Thanks!

2

You can set the body height to the viewport height. In the dashboard you have to import the jQuery first. Go to Dashboard, enter your site settings and go to Custom Code down there.

In the script window you have to enter:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>

to laod jQuery. After that you can add a simple script which I’ll try to explain in details.

<script>
 $(document).ready(function() {
  /* vp_h will hold the height of the browser window */
  var vp_h = $(window).height();
  /* b_g will hold the height of the html body */
  var b_g = $('body').height();
  /* If the body height is lower than window */
  if(b_g < vp_h) {
   /* Set the footer css -> position: absolute; */
   $('footer').css("position","absolute");
  }
 });
</script>

I’ve set the bottom: 0; left: 0; right: 0; in the webflow design mode. You can check it out here: https://webflow.com/design/bodyheight?preview=f23e46cbe8a961bc12ddac7f1fc4605e. You can also find the working script up here http://bodyheight.webflow.com/.

If you have any questions please post them here :wink: We’ll do our best to help you out!
Have fun :slight_smile:

3

Hey @bartekkustra we already include jQuery in webflow.js, so @11am you don’t need the first script. Just letting you guys know!

4

Thanks Bartosz that looks simple enough :slight_smile: I’ll give that a go and let you know how I get on.

5

I forgot to update saying I’ve got it working. Thanks!

6

i can not get this to work and i do not know what i am doing wrong. basically i will use the page i made and take it apart as template so the footer section be will be put on all pages with a php system… the problem is some of the pages have very little content so the footer bar rides up on those pages with not enough content.

so i take it that the jquery checks if the html body is smaller than browser window then it would change the footer position to absolute if it is? which would solve my problem.

i am doing something wrong because i can get the code to work as script does not change anything.

and not to go off topic but i tried to do this with just CSS which i would prefer and it worked on jsfiddle but when i tried add it webflow it did not work…

example of css only

any help appreciated as i can not figure out this issue

7

I’m having the same problem. I’ve used @bartekkustra’s code as well. I’m using the footer element within the interface as well. Any one got any ideas?

8

My bad… Use this:

$(document).ready(function () {
    /* vp_h will hold the height of the browser window */
    var vp_h = $(window).height();
    /* b_g will hold the height of the html body */
    var b_g = $('body').height();
    /* If the body height is lower than window */
    if (b_g < vp_h) {
        /* Set the footer css -> position: absolute; */
        $('.footer').css("position", "absolute");
    }
});

You also have to remember to set .footer css to: left: 0; right: 0; bottom: 0;

1 Like
9

thanks it worked now… it looked like it was missing the period before .footer :wink:

do you know if there is disadvantage of using jquery then CSS to accomplish this… the jquery method seems easier to add…

thanks for the help

10

jQuery lets you determine the position of footer depends on what is the browser window’s height. I dont know if CSS is capable of that.

11

Hi,

I have just added the new navbar to my site and as part of that I have added the latest version of webflow.css. It appears that the new version is setting the body min-height to 100% which is causing this approach to fail (as body height always equals window height).

I have fixed it by overriding min-height:0px; on the body element in my site css but I’m curious to know why this has changed and what other elements it might affect if I override it this way?

Thanks,

Liam

12

This is what I used…

<script>
$(document).ready(function () {

    // calculate element sizes here is accurate because the entire page has been loaded
    $(window).load(function(){

        function fixFooter(){
            var windowHeight = $(window).height();
            var bodyHeight = $('body').height();
            var footerBottom = $('.footer').position().top + $('.footer').outerHeight(true);
        
            if(footerBottom < windowHeight){
                // slam the footer to the bottom
                $('.footer').css("position", "absolute");
                $('.footer').css("left", 0);
                $('.footer').css("right", 0);
                $('.footer').css("bottom", 0); 
            }
        }

        fixFooter();

        $(window).resize(function(){
            fixFooter();
        });

    });
});
</script>
13

Hi, which code box? header or body? do you copy this too. Is there anything else that needs to be set?

14

It goes in the second box, the body tag. Just copy and paste that code. Also, your footer needs to be called footer.

Hope that helps.

1 Like