Add Theme Setting for Sticky Header and Footer [#554048]

The footer as it stands right now is always just under the content. If the content is not long enough, it won't be at the bottom of the page. I had this same problem in a theme I build, and this is how I solved it with js. This just degrades to the current functionality. Obviously you need to change this to match your divs.


$(document).ready(function() {
  var footer_height = $('#footer').height();
  var footer_pos = $('#footer').position();
  var window_height = $(window).height();
  var page_height = $('#page').height();
  var page_pos = $('#page').position();
  var page_total = page_pos.top + page_height;
  var footer_new_pos = window_height - footer_height - page_total;
  var test = footer_height + page_total;
  
  if (test <= window_height) {
    if (footer_pos.top < window_height) {
      $('#footer').css('position', 'relative');
      $('#footer').css('margin-top', footer_new_pos);
    }
  }
  
});

Hope this proves useful!

Comments

Comment #1

stephthegeek CreditAttribution: stephthegeek commented 30 October 2009 at 18:55

Status:	Active	» Postponed
Issue tags:		+skinr page style

Tagging for implementation when Skinr supports page styles

Comment #2

willvincent CreditAttribution: willvincent commented 14 December 2009 at 15:38

Wouldn't this be better implemented with css than javascript?

As demoed here: http://www.cssstickyfooter.com/

Comment #3

stephthegeek CreditAttribution: stephthegeek commented 14 December 2009 at 18:53

If we had a fixed width footer, yes :) afaik there is still no way to do a sticky footer when its of an unknown height.

Comment #4

codycraven CreditAttribution: codycraven commented 20 December 2009 at 07:09

Priority:

Normal

» Minor

To me, JavaScript should be left out of contributed themes output. I think this would be of much better use as a separate contributed module. In the module there would be a configuration that would allow specifying the id of the block element that should be attached to the bottom of the page.

A great reason of why this should be a contributed module, and definitely doesn't belong in a theme, is that you may have bugs. For example in your JavaScript you do not take in to account the content resizing. This means that if JavaScript modifies the content of the page once rendered your footer will not adjust. Best case scenario your css is not applied to footer and you end up with a page where the footer is not "attached" to the bottom if the content is resized smaller. Worst case your page starts very small applying a lot of margin to the top of your footer and your footer becomes lost at the bottom of a scroll with blank space above it when content resizes.

Based on my thoughts on this I believe this issue should be closed.

Comment #5

stephthegeek CreditAttribution: stephthegeek commented 20 December 2009 at 08:09

If we were to implement this, it would be an optional setting. It's a desirable feature for many people but is not appropriate for all cases as you have pointed out.

Haven't had a chance to review in detail yet though, probably not until after Fusion 1.0.

Comment #6

codycraven CreditAttribution: codycraven commented 20 December 2009 at 16:39

I know this is somewhat dragging the issue out, even though it may be a non-issue but...

Another issue with using the supplied JS is that if the sub-theme of Fusion is using a background and/or border on Main and/or Postscript Bottom then the margin-top will result in a blank gap above the footer. It should instead be applied to the block element prior to Footer-Wrapper and then down the correct number of layers so as the continue the background down to the footer. This gets even worse if the Footer region is not rendered and instead is only the footer-message-wrapper...

Also, @stephthegeek you are right about this being a desirable feature for many cases. For this reason there should be a separate module contributed so that this can be applied to many different themes and not just Fusion based.

Comment #7

stephthegeek CreditAttribution: stephthegeek commented 3 April 2010 at 23:22

Version:

6.x-1.x-dev

This will get a lot easier in D7 with region-based Skinr styles :)

Comment #8

lolmaus CreditAttribution: lolmaus commented 30 July 2010 at 19:46

Title:

Make footer stick

» Make footer stick to window's bottom? Delayed until D7. See #2 and #8 howtos for fixed height footers in your D6 Fusion subtheme

It's pretty easy to make footer stick in D6 in your Fusion subtheme, providing that you know and declare footer's height.

First of all, copy page.tpl.php from Fusion core to your subtheme. Open it and drag footer output outside the <div id="page"> like this:

<body id="<?php print $body_id; ?>" class="<?php print $body_classes; ?>">

  <div id="page" class="page">
  ...
  </div><!-- /page -->

  <!-- footer row: width = grid_width -->
  <?php print theme('grid_row', $footer, 'footer', 'full-width', $grid_width); ?>

  ...

</body>

After that, add the following CSS to your CSS file:

html, body { height: 100%; }
#page  { min-height: 100%; }
#page-inner { overflow: auto; padding-bottom: FOOTER-HEIGHTpx; }

#footer-wrapper
{
  height: FOOTER-HEIGHTpx;
  position: relative;
  margin-top: -FOOTER-HEIGHTpx;
  clear: both;
}

Don't forget to replace "FOOTER-HEIGHT" with same number three times (one being negative).

Voila!

This is #2 solution adapted for Fusion.

This solution won't let you apply a stick-to-bottom backround to and .

PS And here's a fix for Adminisration menu always on top:

/* Fixing Administration Menu margin */
body.admin-menu { margin-top: 0 !important; }
body.admin-menu #skip { margin-top:20px !important; }

Comment #9

bigpepper CreditAttribution: bigpepper commented 22 August 2010 at 18:46

I used this tutorial: Sticky Footer
Worked super for me

Comment #10

lolmaus CreditAttribution: lolmaus commented 22 August 2010 at 19:40

Hey bigpepper, this is the same solution as above. It works only for fixed-height footer. :(

Comment #11

Anonymous (not verified) CreditAttribution: Anonymous commented 6 January 2012 at 11:48

Version:		» 7.x-1.x-dev
Category:	feature	» support
Status:	Postponed	» Active

I've searched for a sticky footer for D7 version of Acquia Marina, but I couldn't find anything.

Will the CSS/JS examples work for D7? My site is running drupal-7.10, fusion-7.x-1.x-dev and acquia_marina-7.x-1.x-dev.

Comment #12

elianarunner CreditAttribution: elianarunner commented 9 January 2014 at 12:03

Anyone solved this issue for D7 fusion starter? Drupal 7.22, Fusion7.2 beta.

Comment #13

elianarunner CreditAttribution: elianarunner commented 21 March 2014 at 11:55

Issue summary:

View changes

Thak you Lolmaus, your solution works also on drupal 7 !
There is only one line for the div of footer in page.tlp.php and it should be outside the page.

the css applies the same. Hope this helps d7 Users.

Comment #14

Poieo CreditAttribution: Poieo commented 15 April 2014 at 17:23

Title:	Make footer stick to window's bottom? Delayed until D7. See #2 and #8 howtos for fixed height footers in your D6 Fusion subtheme	» Add Theme Setting for Sticky Header and Footer
Version:	7.x-1.x-dev	» 7.x-2.x-dev
Category:	Support request	» Feature request
Status:	Active	» Needs work