Sticky footer

This seems to be a better way to do it with your theme : https://mystrd.at/modern-clean-css-sticky-footer/

sorry for disturbing

Hi,

Thanks for you interesting question!!
I have not made it before.

For me it seems the position:absolute give some troubles. the footer is not a direct sibling of the body. (wrapped in a ).

On the default layout this works:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 182px;
}
footer {
  position: fixed;
  bottom: 0;
  /* Set the fixed height of the footer here */
  height: 182px;
  width: 100%;
}

You will have to change 182 to the height of your footer. Now i wonder why your example uses absolute. https://caniuse.com/#search=fixed doesn’t show me a reason to not use fixed.

Some notes. JBST is responsive by default which means the footer height is fixed in all cases.
I you have set the grid-float-break-point (768px) by default consider to apply the above only for screen width >= grid-float-break-point. So for instance enter in the LESS Compiler:

@media (min-width: @grid-float-breakpoint) {
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 182px;
}
footer {
  position: fixed;
  bottom: 0;
  /* Set the fixed height of the footer here */
  height: 182px;
  width:100%;
}
}

In the case the height of your footer also varies above the grid-float-break-point you can use jQuery to set your CSS dynamically.

Now i think a better solution can be found at https://plus.google.com/116797701827736533225/posts/DoK3fJKL7LM

This solution extends Bootstrap’s .navbar-fixed-bottom class. You can enter the following code into the Less editor:

@media (min-width: @grid-float-breakpoint) {
footer#colophon { &:extend(.navbar-fixed-bottom);}
}

The preceding code has been wrapped in the @media (min-width: @grid-float-breakpoint) media query remove this wrapper for a sticky footer on mobile devices too. When using the default JBST footer with four columns the height of the footer will be taken to much space when fixed.