January 28, 201016 yr Have a sticky footer that works but not quite as I would like The footer does stick to the bottom of the viewport and as you resize the window the page does expand to fit. Issue is that the footer is 200px heigh and 100px of that is displayed outside of the viewport and must the page must be scrolled down for the other 100px to be visible Below is how it displays followed by what I would like Below is my sticky footer code only (not my full css file html, body { background-image:url(images/background-centre-tile-from-center.jpg); background-repeat:repeat; background-position:center top; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FFF; height: 100%;/*sticky footer*/ .push { height: 200px; /*sticky footer .push must be the same height as .footer */ clear:both; } .footer { height: 200px; /*sticky footer .push must be the same height as .footer */ } * {margin: 0;}/*sticky footer*/ #wrapper { width:960px; margin-right: auto; margin-left: auto; background-image:url(images/content-background-sidebar.jpg); background-repeat:repeat-y; position:relative; min-height: 100%;/*sticky footer*/ height: auto !important;/*sticky footer*/ height: 100%;/*sticky footer*/ margin: 0 auto -200px; /*sticky footer - the bottom margin is the negative value of the footer's height */ } This is the full css file with that sticky footer css within it /* Theme Name: Starkers Theme URI: http://elliotjaystocks.com Description: The totally nude Wordpress theme. Phwoar! (Based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a> by <a href="http://binarybonsai.com/">Michael Heilemann</a>) Version: 2 (WP2.6.2) Author: Elliot Jay Stocks Author URI: http://elliotjaystocks.com Tags: starkers, naked, clean, basic */ @import "style/css/reset.css"; @import "style/css/typography.css"; @import "style/css/layout.css"; #comment { width:660px; } /* Browser -------------------------------------------------------- -------------------------------------------------------- --------------------------------------------------------*/ /*Fireofx*/ :focus { -moz-outline-style: none; } /* Tag -------------------------------------------------------- -------------------------------------------------------- --------------------------------------------------------*/ h1 { font-size:36px; } html, body { background-image:url(images/background-centre-tile-from-center.jpg); background-repeat:repeat; background-position:center top; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FFF; height: 100%;/*sticky footer*/ } /* Class -------------------------------------------------------- -------------------------------------------------------- --------------------------------------------------------*/ .floatLeft {float:left;} .floatRight {float:right;} .clear {clear:both;} .post-content { width:530px; padding-left:25px; padding-right:25px; } .post { padding-bottom:50px; } .push { height: 200px; /*sticky footer .push must be the same height as .footer */ clear:both; } .footer { height: 200px; /*sticky footer .push must be the same height as .footer */ } * {margin: 0;}/*sticky footer*/ /* Layout -------------------------------------------------------- -------------------------------------------------------- --------------------------------------------------------*/ #wrapper { width:960px; margin-right: auto; margin-left: auto; background-image:url(images/content-background-sidebar.jpg); background-repeat:repeat-y; position:relative; min-height: 100%;/*sticky footer*/ height: auto !important;/*sticky footer*/ height: 100%;/*sticky footer*/ margin: 0 auto -200px; /*sticky footer - the bottom margin is the negative value of the footer's height */ } #top { background-image:url(images/logo.jpg); background-position:center; background-repeat:no-repeat; height:113px; width:960px; margin:auto; position:relative; } #header { height:243px; background-image:url(images/header-sidebar.jpg); } #search { padding-right:50px; padding-top:25px; margin-left:700px; } #s { margin:2px; border:none; background-color:transparent; } #searchsubmit { border:0; background-color:transparent; width:58px; cursor: pointer; } #contact-field-background { height:27px; width:58; margin-top:3px; background-image:url(images/search.jpg); background-repeat:no-repeat; background-position:left bottom; } #navigation { /*height:51px;*/ padding-top:56px; padding-left:113px; height: 51px; } #navigation ul { display:inline; list-style-type:none; /*list-style-position:inside;*/ } #navigation li { display:inline; list-style-position:inside; padding:0px; border:0px; margin:0px; } #container { padding-bottom: 100px; } #content { padding-left:50px; padding-right:50px; padding-bottom:100px; } #sidebar { width:214px; } #footerid { width: 960px; margin:auto; background-color:#025589; } Finally my html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <title> <?php if (is_home()) { echo bloginfo('name'); } elseif (is_404()) { echo '404 Not Found'; } elseif (is_category()) { echo 'Category:'; wp_title(''); } elseif (is_search()) { echo 'Search Results'; } elseif ( is_day() || is_month() || is_year() ) { echo 'Archives:'; wp_title(''); } else { echo wp_title(''); } ?> </title> <meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" /> <meta name="description" content="<?php bloginfo('description') ?>" /> <?php if(is_search()) { ?> <meta name="robots" content="noindex, nofollow" /> <?php }?> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_head(); ?> </head> <body> <!-- rollover images using javascript. http://www.designplace.org. --> <!-- place the following code within the <BODY> of your document --> <script src="http://www.tonguetiedmedia.com/ttm-wordpress/wp-content/themes/starkers/javascript/rollover.js" type="text/javascript"></script> <div id="top"></div> <div id="wrapper"> <!-- <div id="container"> --> <div id="header"> <div id="search"> <?php include (TEMPLATEPATH . '/searchform.php'); ?> <!--end search--> </div> <!--end search--> <div class="clear"></div> <div id="navigation"> <?php #wp_list_pages(); ?> <ul> <li> <a href="http://www.tonguetiedmedia.com/index.php" onMouseOver="swap('button-home','home_mouseover_image')" onMouseOut="swap('button-home','home_normal_image')"> <img name="button-home" src="http://www.tonguetiedmedia.com/ttm-wordpress/wp-content/themes/starkers/images/button-home.jpg"/></a> </li> <li> <a href="services" onMouseOver="swap('button-services','services_mouseover_image')" onMouseOut="swap('button-services','services_normal_image')"> <img name="button-services" src="http://www.tonguetiedmedia.com/ttm-wordpress/wp-content/themes/starkers/images/button-services.jpg"/></a> </li> <li> <a href="pricing" onMouseOver="swap('button-pricing','pricing_mouseover_image')" onMouseOut="swap('button-pricing','pricing_normal_image')"> <img name="button-pricing" src="http://www.tonguetiedmedia.com/ttm-wordpress/wp-content/themes/starkers/images/button-pricing.jpg"/></a> </li> <li> <a href="quote" onMouseOver="swap('button-quote','quote_mouseover_image')" onMouseOut="swap('button-quote','quote_normal_image')"> <img name="button-quote" src="http://www.tonguetiedmedia.com/ttm-wordpress/wp-content/themes/starkers/images/button-quote.jpg"/></a> </li> <li> <a href="portfolio" onMouseOver="swap('button-portfolio','portfolio_mouseover_image')" onMouseOut="swap('button-portfolio','portfolio_normal_image')"> <img name="button-portfolio" src="http://www.tonguetiedmedia.com/ttm-wordpress/wp-content/themes/starkers/images/button-portfolio.jpg"/></a> </li> <li> <a href="contact" onMouseOver="swap('button-contact','contact_mouseover_image')" onMouseOut="swap('button-contact','contact_normal_image')"> <img name="button-contact" src="http://www.tonguetiedmedia.com/ttm-wordpress/wp-content/themes/starkers/images/button-contact.jpg"/></a> </li> </ul> <!--end navigation--> </div> <!--end navigation--> <!--header end--></div> <div class="clear"></div> <div id="content"> <?php get_header(); ?> <style type="text/css"> <!-- #post-content { float:left; } --> </style> <div class="post-content" id="post-content"> <h1>This is the Page.php template!</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?> <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?> </div> <?php endwhile; endif; ?> <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> <!--end post-content--> </div> <!--end post-content--> <div id="sidebar" class="floatRight"> <h2>Meta</h2> <ul> <?php /* Widgetized sidebar, if you have the plugin installed. */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it. <li><h2>Author</h2> <p>A little something about you, the author. Nothing lengthy, just an overview.</p> </li> --> <?php if ( is_404() || is_category() || is_day() || is_month() || is_year() || is_search() || is_paged() ) { ?> <li> <?php /* If this is a 404 page */ if (is_404()) { ?> <?php /* If this is a category archive */ } elseif (is_category()) { ?> <p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p> <?php /* If this is a yearly archive */ } elseif (is_day()) { ?> <p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives for the day <?php the_time('l, F jS, Y'); ?>.</p> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> <p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives for <?php the_time('F, Y'); ?>.</p> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> <p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives for the year <?php the_time('Y'); ?>.</p> <?php /* If this is a monthly archive */ } elseif (is_search()) { ?> <p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p> <?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> <p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives.</p> <?php } ?> </li> <?php }?> <li><h2>Archives</h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </li> <?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?> <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?> <?php wp_list_bookmarks(); ?> <?php } ?> <?php endif; ?> </ul> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li> <li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li> <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li> <?php wp_meta(); ?> </ul> <!--end sidebar--> </div> <!--end sidebar--> <?php #get_sidebar(); ?> <?php get_footer(); ?> <div class="clear"></div> <!--end content--> </div> <!--end content--> <div class="clear"></div> <div class="push"></div> <!--end wrapper--> </div> <!--end wrapper--> <?php wp_footer(); ?> <div id="footerid" class="footer"> <p><?php bloginfo('name'); ?> is proudly powered by <a href="http://wordpress.org/">WordPress <?php bloginfo('version'); ?></a> | <a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a> | <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.</p> <!--end of footer--> </div> <!--end of footer--> </body> </html> The html code is infact split between header, page and footer php files as this is in wordpress but its displayed as 1 here The sticky footer technique I am using is this 1 Thanks
January 28, 201016 yr The type of sticky footer you are using will only stick to the window bottom if there isn't much content above, so it leaves a space, but if the content is enough it will push the footer down so it stays below the content and you scroll as normal. Is this what is happening to a certain amount with the content above pushing it down 100px? The actual code looks OK except I usually leave the #wrapper with min-height: 100% and no negative bottom margin so that the wrapper including the push div use 100% of the height and then I put a negative margin-top in the footer code to drag it back into view over the push div. There are two types of sticky footer, your type as shown here http://www.wickham43.net/footerfix.php and the type where the footer is always visible as it has position: fixed; bottom: 0; http://www.wickham43.net/headerfooterfix.php
January 28, 201016 yr Author Thanks for the reply. I've fixed it, I had a header image outside of my wrapper at the top. It was 113 pixels wide and so my footer was being pushed down 113 more than it should which is why my footer was 113px out of the viewport even when no content in my content section was pushing it
Create an account or sign in to comment