ThemeShaper Forums » Thematic

[closed]

Sticky Footer

(39 posts)
  • Started 5 years ago by bucks14
  • Latest reply from bhomatude
  • This topic is resolved

Tags:

  1. thanks sergio for helping me test this! anyone else want to lend a hand. here's my latest version. seems to work for me, and almost works for sergio (though not in child themes apparently)

    // KIA Sticky Footer
    function kia_sticky() { ?>
    <script type="text/javascript">
    
        jQuery.noConflict();
    
        jQuery(document).ready(function($){
    
    		$.getDocHeight = function(){
    			return Math.max(
    				$(document).height(),
    				$(window).height(),
    				/* For opera: */
    				document.documentElement.clientHeight
    			);
    		};
    
    		matchHeight();
    
    		function matchHeight() {
    
    			//available height of window - #header and #footer
    			var mainHeight = $.getDocHeight() - $("#header").outerHeight() - $("#leader").outerHeight() - $("#footer").outerHeight() - parseInt($("#footer").css("margin-top")) - 1 - parseInt($("#main").css("padding-top"))- parseInt($("#main").css("padding-bottom")) - $("#wpadminbar").outerHeight() ;
    
    			$('#main').css('min-height', mainHeight );
    
    		}
    
    		$(window).resize(matchHeight);
    });
    
    </script>
    
    <?php
    }
    add_action('wp_head', 'kia_sticky');
    // End KIA Sticky Footer

    suggestions?

    Posted 3 years ago #
  2. Worked great for me, Helga. Thank you.

    www.josephfrederick.com

    Posted 3 years ago #
  3. yeah? good to hear. also have i mentioned how much i really like your home page design?

    Posted 3 years ago #
  4. Dominor Novus
    Member

    Can anyone help me in EXACTLY aligning the footer.

    Both solutions provided in this thread result in the bottom 20px or so the footer being off the page.

    Posted 2 years ago #
  5. Dominor Novus
    Member

    Correction:
    The solution posted by Chris works exactly in FF.

    In Chrome it's about 10px off.
    IE is about 50px off.
    Safari is over 100px.

    Any ideas why this is happening?

    Posted 2 years ago #
  6. bhomatude
    Member

    I'm still trying to find an elegant way to do this! Both Chris' and Helga's solutions work... BUT only when you first load the page.

    If you resize the browser (safari/FF) the footer stays pinned to the bottom but you must now scroll to find it. Refreshing the browser, no matter what size it is, will place the footer at the bottom.

    Any other ideas... So far, the only one that worked for me was just position:absolute but that broke in IE7 and it's not great because of the potential overlapping of elements.

    Posted 2 years ago #
  7. "If you resize the browser (safari/FF) the footer stays pinned to the bottom but you must now scroll to find it. Refreshing the browser, no matter what size it is, will place the footer at the bottom."

    the point of the sticky footer is that it is always at the bottom of the content and not floating in the middle of a short page. on a page with long enough content the content pushes the footer below the viewport anyway and it doesn't matter. the point isn't to always be fixed to the bottom of the viewport, which sounds like what you are after. in that case you do need position: absolute.

    Posted 2 years ago #
  8. bhomatude
    Member

    Thanks for the reply, Helga... Yes I do want the footer to always be visible and always stuck to the bottom of the browser (even when dynamically resizing the browser)... And also allow for scrollable content above, if necessary. There are various jquery plugins that seem to do it that I think I'll have to look into.

    Posted 2 years ago #
  9. bhomatude
    Member


RSS feed for this topic

Topic Closed

This topic has been closed to new replies.