I am working on a Wordpress theme in which I want to have a sticky footer. Instead of sticking to the bottom of the screen, the footer is showing up about 180px too low so that I have to scroll the window to see it -- regardless of whether the page is empty or is full of content above the fold. I have spent hours literally reading the CSS file (it's huge) to find the problem and I'm getting nowhere. Any help appreciated!
Applicable CSS:
Applicable CSS:
Code:
body,html{height:100%;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-
size:100%;vertical-align:top;background:transparent;margin:0;padding:0;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
:focus{outline:0;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
/* Floating & Alignment */
.fl{float:left;}
.fr{float:right;}
.ac{text-align:center;}
.ar{text-align:right;}
/* Clear Floats */
.col-full:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.fix{clear:both;height:1px;overflow:hidden;margin:-1px 0 0;}
html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear
{background:none;border:0;clear:both;display:block;float:none;font-size:0;list-
style:none;overflow:hidden;visibility:hidden;width:0;height:0;margin:0;padding:0;}
/* 1.1 Defaults */
body { font: 12px/1.5em sans-serif; color: #444; background-color: #FFFFFF; background-image: url(images/bg-body-tile.png); background-repeat: repeat; background-position: left top; }
p {margin: 0; }
hr { background-color: #e6e6e6; border:0; height: 1px; margin-bottom: 20px; }
/* 2.1 Containers & Columns */
#wrapper { min-height: 100%; margin: 0 auto -4em; background: transparent url(images/wrapper-bg-colourstrip.jpg) repeat-x left top; padding-top: -5px; }
#main{width:900px; overflow:auto; }
#main.fullwidth, .layout-full #main, .col-full {width: 900px; margin:0 auto; }
#sidebar{width:250px;}
#sidebar .secondary { width:140px; }
.entry img { max-width:565px; }
.layout-full .entry img { max-width:890px; }
.col-left { float: left; }
.col-right { float: right; }
.two-col-right #main { float:right; }
.two-col-right #sidebar { float:left; }
/* 2.4 Content */
#content{padding:0 0 2em; }
/* 2.6 Footer */
#footer{position: relative; margin-top: -50px; height: 50px; clear: both; padding: 10px 0 0 40px;
background: url(images/bg-minifeatures.png) repeat top; color:#999; }
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}
#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer.png) repeat top left;
background-size:205px 411px; padding:0 0 0 0; }
#footer-widgets .block { padding:20px 10px 0 10px; float:left; }
#footer-widgets .col-1 .block { width:100%; padding-left:0; }
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
#footer-widgets .col-3 .block { width:270px; padding-left: 16px; }
#footer-widgets .col-4 .block { width:200px; padding-left: 10px; }
PHP:
<?php
global $woo_options;
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php woo_title(); ?></title>
<?php woo_meta(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
<?php woo_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php woo_top(); ?>
<div id="wrapper">
<?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) { ?>
<div id="top">
<div class="col-full">
<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
</div>
</div><!-- /#top -->
<?php } ?>
<div id="header">
<div class="col-full">
<div id="logo">
<?php
$logo = get_template_directory_uri() . '/images/logo.png';
if ( isset( $woo_options['woo_logo'] ) && $woo_options['woo_logo'] != '' ) { $logo = $woo_options['woo_logo']; }
?>
<?php if ( ! isset( $woo_options['woo_texttitle'] ) || $woo_options['woo_texttitle'] != 'true' ) { ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php bloginfo( 'description' ); ?>">
<img src="<?php echo $logo; ?>" alt="<?php bloginfo( 'name' ); ?>" />
</a>
<?php } ?>
<?php if( is_singular() && ! is_front_page() ) { ?>
<span class="site-title"><a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a></span>
<?php } else { ?>
<h1 class="site-title"><a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php }; ?>
<span class="site-description"><?php bloginfo( 'description' ); ?></span>
</div><!-- /#logo -->
<div id="navigation" class="fr">
<?php
if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fl', 'theme_location' => 'primary-menu' ) );
} else {
?>
<ul id="main-nav" class="nav fl">
<?php
if ( get_option( 'woo_custom_nav_menu' ) == 'true' ) {
if ( function_exists( 'woo_custom_navigation_output' ) )
woo_custom_navigation_output( "name=Woo Menu 1" );
} else { ?>
<?php if ( is_page() ) { $highlight = "page_item"; } else { $highlight = "page_item current_page_item"; } ?>
<li class="<?php echo $highlight; ?>"><a href="<?php echo home_url( '/' ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
<?php } ?>
</ul><!-- /#nav -->
<?php } ?>
<?php if ( isset( $woo_options['woo_feed_url'] ) && $woo_options['woo_feed_url'] != '' ) { ?>
<ul class="rss fr">
<li class="sub-rss"><a href="<?php if ( $woo_options['woo_feed_url'] ) { echo $woo_options['woo_feed_url']; } else { echo get_bloginfo_rss( 'rss2_url' ); } ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/ico-rss.png" alt="<?php bloginfo( 'name' ); ?>" /></a></li>
</ul>
<?php } ?>
</div><!-- /#navigation -->
</div><!--/.col-full-->
</div><!--/#header-->
<?php
get_header();
global $woo_options;
?>
<?php if ( isset( $woo_options['woo_slider'] ) && $woo_options['woo_slider'] == 'true' && is_home() && ! is_paged() ) { get_template_part( 'includes/featured' ); } // Load the Featured Slider ?>
<?php if ( isset( $woo_options['woo_mini_features'] ) && $woo_options['woo_mini_features'] == 'true' && is_home() && ! is_paged() ) { get_template_part( 'includes/mini-features' ); } // Load the Mini Features ?>
<div id="content" class="col-full">
<div id="main" class="fullwidth">
<?php if ( $woo_options['woo_breadcrumbs_show'] == 'true' ) { ?>
<div id="breadcrumbs">
<?php woo_breadcrumbs(); ?>
</div><!--/#breadcrumbs -->
<?php } ?>
<?php
$homepage_columns = array( 'left' => 'pagecontent', 'middle' => 'portfolio', 'right' => 'blog' );
$count = 0;
foreach ( $homepage_columns as $k => $v ) { $count++;
$css_class = 'block';
if ( $count == count( $homepage_columns ) ) { $css_class .= ' last'; }
?>
<div id="homepage-column-<?php echo $count; ?>" class="<?php echo $css_class; ?>">
<?php
if ( is_active_sidebar( 'homepage-' . $k ) ) {
dynamic_sidebar( 'homepage-' . $k );
} else {
get_template_part( 'includes/home', $v );
}
?>
</div><!--/.block-->
<?php
}
?>
<div class="clear"></div><!--/.clear-->
</div><!-- /#main -->
</div><!-- /#content -->
<?php get_footer(); ?>
</div><!-- /#wrapper -->
<?php global $woo_options; ?>
<?php
$total = $woo_options['woo_footer_sidebars']; if ( ! isset( $total ) ) { $total = 4; }
if ( ( woo_active_sidebar( 'footer-1' ) ||
woo_active_sidebar( 'footer-2' ) ||
woo_active_sidebar( 'footer-3' ) ||
woo_active_sidebar( 'footer-4' ) ) && $total > 0 ) {
?>
<div id="footer-widgets">
<div class="col-full col-<?php echo $total; ?>">
<?php $i = 0; while ( $i < $total ) { $i++; ?>
<?php if ( woo_active_sidebar( 'footer-' . $i ) ) { ?>
<div class="block footer-widget-<?php echo $i; ?>">
<?php woo_sidebar( 'footer-' . $i ); ?>
</div>
<?php } ?>
<?php } ?>
<div class="fix"></div>
</div>
</div><!-- /#footer-widgets -->
<?php } ?>
<div id="footer">
<div class="col-full">
<div id="copyright" class="col-left">
<?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_left_text'] );
} else { ?>
<p><?php bloginfo(); ?> © <?php echo date( 'Y' ); ?>. <?php _e( 'All Rights Reserved.', 'woothemes' ); ?></p>
<?php } ?>
</div>
<div id="credit" class="col-right">
<?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_right_text'] );
} else { ?>
<?php } ?>
</div></div>
</div><!-- /#footer -->
<?php wp_footer(); ?>
<?php woo_foot(); ?>
</body>
</html>
Last edited:
