Has anyone tried to get a sticky footer to work with Omega?

I have attempted myself (on a recent project), but as much as I love the sticky footer, it's damn tough with all the "good" examples out there.... The fixed height just doesn't work for me either.

Sadly, I gave up (after a short attempt) trying to implement on as it was only an annoyance, and when site launches, there wouldn't be any pages, that were too short for the footer to appear at the bottom anyway.

After being over-joyed with most other aspects and functionality of Omega, I'm now banging my head against this one as well.

I've tried to implement both of the following solutions -
http://www.cssstickyfooter.com/
http://ryanfait.com/sticky-footer/

and a JQuery dynamic fix -
http://www.webplantmedia.com/jquery/2010/04/sticky-footer-at-bottom-of-p...

...all to no avail.

To make the pure CSS solutions work I'm guessing one would have to over-ride the rendering of the "#zones-below" footer region outside of the parent '#page' container, which I assume would break the omega region functionality. I'll have a pop at overriding through templates, but if anyone else makes any headway on this I'd greatly appreciate hearing about it.

Himerus - thanks for all the sterling work on Omega and Delta, thus far this has been the only stumbling block for me.

I've found a Jquery solution which does the job for me (pure CSS would be preferable, but I'll take the easy win here) -

https://github.com/shane-garelja/Sticky-Footer-jQuery-Plugin

This particular sticky footer is persistent irrespective of browser and content height, and offers an expanding footer when the user has scrolled to the bottom of the page. While pretty fancy, Shane Garelja (the author) kindly helped this Jquery novice adapt it to a traditional sticky footer that isn't visible unless the browser window height exceeds that of the content by replacing code in the "setFooterPos" function as follows -

change this:

                } else {
                    // Set to pos relative if footer visible
                    if ((availableHeight <= kickInPos) && ($footer.css('position') != 'relative' || firstRun)) {
                        $footer.stop().css({position: 'relative', bottom: 'auto'});
                        settings.inactiveToggle_Callback();
                    // Set to pos fixed if footer NOT visible
                    } else if ((availableHeight > kickInPos) && ($footer.css('position') != 'fixed' || firstRun)) {
                        if (firstRun) {
                            $footer.stop().css({position: 'fixed', left: '0px', bottom: footerTopPos}).animate({'bottom': footerTopPos + settings.visible})
                        } else {
                            $footer.stop().css({position: 'fixed', left: '0px', bottom: footerTopPos + settings.visible});
                        }
                        settings.activeToggle_Callback();
                    }
                }

To this:

                } else {
                        $footer.stop().css({position: 'relative', bottom: 'auto'});
                        settings.inactiveToggle_Callback();
                }

Thanks to Shane at http://heyday.co.nz

Looks like a good snippet....

I may test that out myself on a site... if it's "really" good, I'll consider making it an option to enable in Omega subthemes.

I want that as a toggle-able feature in Omega too (like the formalize.me stuff). I actually want it for both, header and footer! That is, ofc, only if the snippet really works well :)

Any news on this one?

edit: script seems to work fine with latest 7.x-3.x-dev (may 28th) in Chrome, FF, IE9/8

+1.

I'm not fond of using javascript for layout and using a position: fixed; bottom:0px; has an even worse result. I'd love to see a clean solution, but as far as I can tell the footer needs to be outside the #page element for this to happen. Now where would I go and change this?

same remark as Elder Brother: thus far this has been the only stumbling block for me.

Yah... I think i can fix this quite easily... I will just use page_bottom and page_top for that. However I am not yet sure about how this should be visualized in the theme settings UI and which techniques I will use for the regions. Probably I will add two additional sections and then allow the users to drop zones (along with regions) into those sections (which will then place themselves in the page_bottom and page_top containers where I will make them position: fixed...)

page_top and page_bottom are hidden regions on the block management pages, and are technically "reserved" for things like admin_menu, admin, google analytics, etc. that will inject content/javascript that will be placed in an appropriate position on page, but not regions that should have users directly placing content into them...

position: fixed is not the appropriate approach for a sticky footer as mobile devices (all of them) ignore that css positioning for fear something completely covers the users mobile browser.

I'm moving this issue to 3.x, and IF and I repeat IF it is included, the only proper method would be to allow the current footer zone to be marked as sticky, and I still hesitate because of the issues with ANY proper CSS method to make this possible.

positon: fixed solves nothing as that is not a sticky footer.
A sticky footer is one that IF the page is shorter than the browser sticks to the bottom of the browser window, BUT if the content of the page is tall, then the footer appears as normal at the bottom of the content. Not a footer that always appears in a fixed position.

@Brian Altenhofel: I used the same technique since I needed it fast, works good though! ;)

Brian, can you be more specific in what you added after the closing div in your custom page.tpl.php to get it to work?

This is what I did

page.tpl.php

<?php 
/**
 * @file
 * Alpha's theme implementation to display a single Drupal page.
 */
?>
<div id='wrap'>
<div <?php print $attributes; ?>>
  <?php if (isset($page['header'])) : ?>
    <?php print render($page['header']); ?>
  <?php endif; ?>
  
  <?php if (isset($page['content'])) : ?>
    <?php print render($page['content']); ?>
  <?php endif; ?>  
</div>
</div>
<?php if (isset($page['footer'])) : ?>
  <?php print render($page['footer']); ?>
<?php endif; ?>

CSS

html, body, #wrap {height: 100%;}
#page {min-height: 100%;)

Then you need to do whatever css to the #section-footer

some little mistakes in your code there:

<div id='wrap'> ----> <div id="wrap">
#page {min-height: 100%;) ----> #page {min-height: 100%;}

for those who are wondering why it's not working :)

iStryker ... it doesn't work for Chrome or Safari... does in explorer and FF

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ works... nice and simple css, using a 'push' div

Confirmed #17 works nicely for me. I copied the page.tpl.php from alpha theme and added it to my custom theme so I could override it. I moved the footer from inside the page wrapper and placed it below the page so the final markup is as follows:

<?php 
/**
 * @file
 * Override of Alpha's theme implementation to display a
 * single Drupal page. Footer is moved outside of container
 * to allow for a sticky footer to be used.
 */
?>
<div<?php print $attributes; ?>>
  <?php if (isset($page['header'])) : ?>
    <?php print render($page['header']); ?>
  <?php endif; ?>
  
  <?php if (isset($page['content'])) : ?>
    <?php print render($page['content']); ?>
  <?php endif; ?>
</div>
<?php if (isset($page['footer'])) : ?>
  <?php print render($page['footer']); ?>
<?php endif; ?>

I then ensure the footer and region footer first is always rendered in the appearance settings for the theme and use the following css for the sticky footer:

html, body {
  height: 100%;  
}

#page {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -12em;
}

#region-footer-first, .zone-postscript {
  height: 12em;
}

#region-footer-first, #zone-footer {
  background: #505050;
}

#18 @tanc: it is not recommended to use any region that is used in Omega theme as push region, since adding content to that region will mess up the footer placement.
Also, you need to check the box 'force this region to be rendered' in the Omega settings of the postscript region used for this, otherwise it won't work either.
Instead of using a region, I'd recommend just adding the empty <div class="push"></div> to the page.tpl.php, which wont be used to add content in it. As explained in the link of #17

Please reopen if it doesn't work as described in #17

subscribing

I can't make Ryan Fait's solution work. can someone please post a working TPL and CSS rules?

thanks!

edit: I've found a solution by Matthew James Taylor here which seems to adapt pretty well to Omega.

you don't have to change your TPL. just use the CSS like so:

HTML, BODY {
  height: 100%;
}

#page {
  min-height: 100%;
  position: relative;
}

#section-content {
  padding-bottom: XX;
}

#section-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: XX;
}

just remember to replace XX with your actual footer height. you may want to declare different heights for wide, normal and narrow layouts.

it somehow works with IE 8 - I mean, users can't resize their window or they'll get scrollbars when reducing or empty space under the footer if enlarging.

could someone please test with IE 9?

cheers,
Luciano

The Matthew James Taylor's solution in #22 worked for me. Thanks luco and most of all, kudos to Matthew James Taylor.

@Jumoke if you mean the CSS in #22, that comes from Matthew James Taylor ;]

@Gilj I recommend you try the CSS in #22. please report back with your comments.

cheers

@luco, oops thanks ; )

#22 worked for me too :)

Sorry but I don't see how #22 is going to work. #page has several siblings #omega-media-query-dummy, #region-page-top, and #region-page-bottom what means that #page can't or shouldn't take the full height available, beside the following code will also place your footer to the bottom of the viewport without the need of any min-height.

html,
body {
  height: 100%;
}

#page {
  padding-bottom: 30px; /* footer's height */
}

#section-footer {
  bottom: 0;
  left: 0;
  height: 30px; /* chose a height */
  position: absolute;
  width: 100%;
}

Of course this only work as long as #page position is static.

Please if somebody find a solution for this that also combine equal height for the content and sidebars please let me know.

#22
IE9 - OK

I managed to get round this another way... hopefully useful to someone else out there.

I've only tested this out on safari, chrome and firefox so far, but it appears to work. I'm sure someone will shout if its not working for other browsers...

Simply added a footer_spacer which is the same size as the footer_second, which extends the page size to the correct height, and positioned the footer_second as fixed.

Firstly I added another Footer region to the .info file -

regions[footer_first] = Footer First
regions[footer_second] = Footer Second
regions[footer_spacer] = Footer Spacer

Secondly, copied the settings of footer_second and used it for footer_spacer

settings[alpha_region_footer_second_equal_height_container] = ''
settings[alpha_region_footer_second_equal_height_element] = ''
settings[alpha_region_footer_second_force] = ''
settings[alpha_region_footer_second_zone] = 'footer'
settings[alpha_region_footer_second_prefix] = ''
settings[alpha_region_footer_second_columns] = '12'
settings[alpha_region_footer_second_suffix] = ''
settings[alpha_region_footer_second_weight] = '2'
settings[alpha_region_footer_second_css] = ''

settings[alpha_region_footer_spacer_equal_height_container] = ''
settings[alpha_region_footer_spacer_equal_height_element] = ''
settings[alpha_region_footer_spacer_force] = ''
settings[alpha_region_footer_spacer_zone] = 'footer'
settings[alpha_region_footer_spacer_prefix] = ''
settings[alpha_region_footer_spacer_columns] = '12'
settings[alpha_region_footer_spacer_suffix] = ''
settings[alpha_region_footer_spacer_weight] = '2'
settings[alpha_region_footer_spacer_css] = ''

Using the following CSS to fix the footer_second position:

#region-footer-second {
    position: fixed;
    bottom: 0;
    background-color: black;
    height: 40px;
}

#region-footer-spacer {
    height: 40px;
}

I now have a sticky footer ;o)

Also used Jquery #3 solution and added it as an optional library choice in my sub-theme, so far it works great.

It would be nice to see proper js with attached behavior though. Now I use the document.ready function.

#22 works perfectly on mac FF 4.0.1, Safari 5.1.2, and Chrome 16.0.912.77. Thank you...

Although it works perfectly, the admin bar at the top makes the page longer and you have to scroll down to reach the bottom but it is not a problem at all.

yeah, I wish that CSS were integrated in Omega as an optional stylesheet. I can incorporate it into my projects easily.

I also have that issue with Admin Menu, but since I only use Admin Menu when logged in, it hasn't bothered me yet. ;)

Hi
I'm pretty new to both drupal and omega, but if you only want the color of the footer to go all the way down to the bottom of the page, you could set the background of your footer as the body background, then style the header, content and other sections as you want. Just a thought.

I used to use a different method before, but since I started using Omega, I've been using this code in my theme-alpha-default.css file:

/* sticky footer */
html, body {height: 100%; margin: 0;}
#page {display: table; width: 100%;}
html>/**/body #page {height: 100%;}
*:first-child+html #page {height: auto;}
.section {display: table-row;}
html>/**/body .section-content {height: 100%;}
*:first-child+html body .section-content {height: auto;}

It shouldn't require changing any of the HTML templates.

I thought I knew some html and css. But the above in #35 shows me I don't know jack. Kkasichke, you are a freaking Wizard. Could you drop me a link to where I can learn what "html>/**/" and "*:first-child+html" are or do?

@mgriebe: They are CSS hacks to target specific versions of browsers. Here is one explanation: http://www.webdevout.net/css-hacks#in_css-selectors

Thanks!

Seems like this issue must be closed.

If not feel free to re-open it.

Thanks

@alex610, that happens to me only when a user is logged in and using the admin toolbar. If it happens for anonymous users as well, I'd check to see if some other CSS positioning rules are conflicting.

#35 has worked for me, but i have had to do some additional things:

• Force region-page-top to min-height:0, because when you enable alpha debug blocks, omega sets the value to 1px, making you having a page of 100% height plus one 1px region above it.
• Preprocess page and zone in template.php to remove the clearfix class from page and zones and its content divs (attributes_array and content_attributes_array in the &vars var.

After all, it doesn't work in IE7, so i think i will end going to the fixed height footer method :(

#22 worked great when using Fusion starter theme!

HTML, BODY {height: 100%;}
#page {min-height: 100%; position: relative;}
#page-inner {padding-bottom: XX;}
#footer-wrapper {position: absolute; bottom: 0; height: XX; margin: 0 auto;}

Here is a much cleaner, easier to implement method.

http://eureka.ykyuen.info/2012/08/23/drupal-7-apply-sticky-footer-in-omega-theme/

it uses both hacks and CSS3. I'm confused... will it work on IE?

I still have scroll when using the solution from kkasischke. This is only a problem with little content though.

Big thanks for this! Doesn't work in IE7... but that is not a loss as far as I'm concerned.

#44 is the same solution as posted in #35. ¿don't people read before post?

#35 + #42 seems to work.... but IE7. When #42 was posted i did'nt know yet about IE9.js

I think it could help (#35 + #42 + IE9.js).

Tried #22 and worked great! Thanks!

Thanks #22 works awesome.

Thanks for this. The solution #22 seems to be working for me also. For the admin menu I added this extra line at the end of that chunk of css and it fixed the issue:

/* Adjust the sticky footer for the extra margin that admin-bar adds */
body.admin-menu #section-footer {
  bottom: 29px;
}

I take that back. The line I posted in #52 adds extra space below the footer when the page has to scroll. Leaving it as-is seems better.

I can confirm that no. 22 works perfectly for me.

#22 works for me. Thank you