How to make footer stay at the bottom

How To
1

Hi all,
is there a way to make the footer stay at the bottom of the page when the page content is less than viewport height in the page templates?

in oxygen template i use min-height calc(100vh - (header height + footer height)) on the inner content container to set the minimum height of pages with little content so that the footer stays at the bottom of the page.

is there a way to do same thing in Bricks without doing it on each and every page where the content is less than viewport height?

Thanks.

2

Hi @Yn_Nik_Stuntman,

everything except the header and the footer is inside #bricks-content, so you can apply your min-height to it under Bricks » Settings » Custom Code.

3

Hi @Yn_Nik_Stuntman and @timmse,

I’m using this jQuery code for lack of a better solution. Maybe someone will have a CSS solution instead:

jQuery(function($){
function stickyFooter(){
var footer = $(“footer”);
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({‘margin-top’ : height+‘px’});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});

1 Like
4

Thanks for the help guys :+1:

5

Using Yn_Nik_Stuntman’s min-height formula and timmse’s custom code advice, I can verify this works.

I simply put:
#bricks-content { min-height: calc(100vh - 220px); }

and it works like a charm!

Many thanks!

1 Like
6

Timmse - is it possible therefore for your team to incorporate this as a new feature - “Sticky Footer”?

1 Like
7

Hi Tony,

I don’t think so, because it heavily relies on the individual layout, individual heights, and so on
 and in it’s simplest approach it is just one single line of CSS - that really should not overwhelm anyone :smiley:

But feel free to add it to the idea board. If it get’s a high amount of votes, it will be implemented!

Best regards,
timmse

8

No probs. Makes sense. Thanks.

9

Instead of targeting #bricks-content I solved it by targeting #bricks-site-wrapper by adding the CSS

#bricks-site-wrapper {
  min-height: 100vh;
}

to Bricks > Settings > Custom Code > Custom CSS (in Wordpress Admin panel).

The footer seem to already stay at the bottom of the #bricks-site-wrapper so just adding the CSS above solved the issue by itself. Maybe it was different in older versions of Bricks.

Please note that when logged in to Wordpress as admin the admin bar that’s visible when viewing the site on the frontend will push the footer further down so a page that is less than 100vh will be 100vh + the height of the admin bar. This won’t be an issue for most visitors of a site in a normal use case though so the solution above is good enough for me at least.

I personally think this should be added by default. Without the CSS above the footer is already down at the bottom both when editing and previewing a page in the Bricks Builder editor but not when viewing it on the frontend. So the expected behaviour should be that it acts the same on the frontend, in my view at least. :slight_smile:

1 Like
10

Hi @robin,
in the new version 1.4 of Bricks #bricks-site-wrapper has been removed.
I have tried with

page-template-default
page
brx-body

one at times, and all work well.
Which of these is best to use for this purpose?

Thanks,
Daniele

11

Hey @lele,

Good question! I use .brx-body myself now. If you want min-height 100vh to be applied to all posts, pages etc I think .brx-body is the best bet.

The .page-template-default and .page is not applied everywhere. For example they are not present when viewing blog posts.

Hope it helps Daniele!

Best regards,
Robin

12

Thanks @robin, I will keep this setting.

Best regards,
Daniele

1 Like
13

hi there. if you want the footer to stick to the bottom try this option,

but if you want the footer to stay at the bottom and as you scroll it shows up then create
a container and add height: 100VH VH mean Vertical height(mening it will cover the whole scroon height from top to bottom).

image
image2757×1788 113 KB

in this example the footer has a class of footer
and if you see the style specify the fixed position on the css properties.

and if you want to display your menu, content, and footer then you do like this. This is just an example
lets say

the screen is 100 vh right

then you can create a header 0f 10vh (where logo navigation and contact button may go)
container of 80vh (all the info for the page will go)
and footer of 10vh (is where anything you want to add for example the copyright section and so on)
that will give you a total of 100vh

hope this makes sence. let me know

14

Adding this simple CSS code on bricks>settings>custom code>custom CSS fixes it:

.brx-body {
	min-height: 100dvh;
}

Source: How to Push The Footer Down in Bricks - BricksLabs

16

Here is my take:


.bricks-is-frontend.brx-body {
  display: grid;
  min-height: 100%;
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  & > header {
    grid-row: header;
  }
  & > main,
  & > article {
    grid-row: content;
  }
  & > footer {
    grid-row: footer;
  }
}

This will always keep the footer pinned to the bottom of the screen. it will set the body min-height to 100% and especially useful: if there are other elements like e.g. your gdpr-cookie-script-button or a popup at the same level, those will not be effected or disturbe layout.

Edit: it’s scss but you will get the gist of it