Utilizing a Sticky CSS Footer With Custom WordPress Layout

As the title suggests, I’m having problems being able to utilize a CSS sticky footer for the Website I’m designing for myself (this will be the first Website that I’m using a combination of a liquid and fixed-width layout without the usage of tables; most of my layouts have focused on fixed-width layouts). I attempted to use solutions that I found on http://www.cssstickyfooter.com/, Ryan Fait’s Website, and https://code.google.com/p/cleanstickyfooter/, but each time I utilize any of those solutions with my CSS, it would generate too much space between the wrapper and the footer to where a scroll bar would appear, even though there are only three tester paragraphs in the wrapper.

Basically, what I’m wanting to do is to make the footer sticky without a scroll bar appearing unless there is enough content generated to merit a scroll bar. Furthermore, I was wanting to accomplish this without giving the footer a fixed positioning.

In all honesty, I’m a bit stumped at the moment, so that’s why I ended up joining the Website to seek some help. I’m not sure if some of the coding from WordPress or HTML5 Boilerplate is causing my troubles, but if anyone can provide me a solution, I would gladly appreciate the advice.

Thank you very much for your time and cooperation.

style.css

/*
Theme Name: Destroyer X Productions v1.0 Layout
Theme URI: http://www.destroyerx.com/
Author: Destroyer X Productions
Author URI: http://www.destroyerx.com/ 
Version: 1.0
*/

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family: sans-serif; color: #222; }

body { margin: 0; font-size: 1em; line-height: 1.4; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

/* ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } */
/* ::selection { background: #fe57a1; color: #fff; text-shadow: none; } */


::-moz-selection {
   background: #3E85E5;
   color: #FFFFFF;
   text-shadow: none;
}

::selection {
   background: #3E85E5;
   color: #FFFFFF;
   text-shadow: none;
}


/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */

button, input { line-height: normal; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*
 * Re-set default cursor for disabled elements
 */

button[disabled], input[disabled] { cursor: default; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Custom CSS begins here */

body {
   background: #FFFFFF;
}

#topHeader {
   background: #A8B1DA;
   width: 100%;
   height: 100px;
}

#headerContainer {
   /* The top and bottom margins are 0 pixels and the same amount of space
      for the left and right margins */
   margin: 0 auto;
   width: 975px;
}

#headerLogo {
   background: url( "images/header.png" ) no-repeat;

   /* Important to set the anchor tag as a block element so the size can be
      specified */
   display: block;
   overflow: hidden; /* Used to hide content outside the box */
   position: relative;
   text-indent: 100%; /* Used to indent the text just outside the containing box */
   white-space: nowrap; /* Keeps the text from wrapping back into the box */
   width: 400px;
   height: 100px;
}

#tagLine {
   display: block;
   float: right;
   position: relative;
   width: 536px;
   height: 100px;
}

/* Technique for turning an unordered list into a navigation menu from
   http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/ */

#topNavigation {
   background: #000000;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   width: 100%;
   height: 48px;
}

#topNav {
   background: #FF0000;
   margin: 0 auto;
   width: 975px;
}

#topNav li {
   display: inline; /* Converts the unordered list from a block element to inline */
   margin: 0;
   padding: 0;
}

#topNav a:link, #topNav a:visited {
   color: white;
   float: left;
   font-size: 0.8em;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   padding: 15px;
   text-decoration: none; /* Removes the underlining of the links */
   text-transform: uppercase; /* Renders all the text in uppercase */
   width: auto;
}

#topNav a:hover {
   color: white;
   background: #666666;

   /* Moves the shadow one pixel to the right and one pixel down; also gives a blur of 
      one pixel; does not work in IE6, IE7, or IE8 */
   text-shadow: 1px 1px 1px black;
}

img.topAdvertisement {
   display: block;
   margin: 10px auto;
}

#wrapper {
   margin: 0 auto;
   width: 975px;
}

#footer {
   background: #FF0000;
}

#bottomNavigation {
   background: #000000;
   color: #FFFFFF;
   width: 100%;
   height: 30px;
}

#bottomNav {
   margin: 0 auto;
   text-align: center;
   width: 975px;
}

#footerCopyright {
   background: #A8B1DA;
   padding-top: 25px;
   width: 100%;
   height: 50px;
}

#footerCopyright p {
   margin: 0 auto;
   text-align: center;
   width: 975px;
}

/* Custom CSS ends here */


/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

header.php

<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes( ); ?>><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" <?php language_attributes( ); ?>><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" <?php language_attributes( ); ?>><![endif]-->

<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--><html class="no-js" <?php language_attributes( ); ?>><!--<![endif]-->

<head>
<title><?php bloginfo( 'name' ); ?><?php wp_title( '|', true, '' ); ?></title>

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="description" content="Your Web Design and Web Hosting Solution">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta property="og:image" content="<?php bloginfo( 'url' ); ?>/wp/wp-content/themes/destroyerxproductions_1.0/images/facebookLogo001.png">

<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">

<!--
   Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons
-->

<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

<!--
   All JavaScript at the bottom, except this Modernizr build.
   Modernizr enables HTML5 elements & feature detects for optimal performance.

   Create your own custom Modernizr build: www.modernizr.com/download/
-->
<script src="<?php bloginfo( 'url' ); ?>/wp/wp-content/themes/destroyerxproductions_1.0/js/libs/modernizr-2.6.2.min.js"></script>

<!-- Begin JavaScript for Google Custom Search bar and results -->
<script>
  (function() {
    var cx = '013668527812680075235:fly9iuahehq';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<!-- End JavaScript for Google Custom Search bar and results -->

<?php wp_head( ); ?>
</head>
<body>

<!-- This is where the wrapper of the Website begins -->
<!-- <div id="wrapper"> -->

  <header id="topHeader">
    <div id="headerContainer">
      <img src="<?php bloginfo( 'url' ); ?>/wp/wp-content/themes/destroyerxproductions_1.0/images/tagLine.png" alt="Your Web Design and Web Hosting Solution" id="tagLine" />
      <a href="<?php bloginfo( 'url' ); ?>" id="headerLogo" title="Destroyer X Productions">Destroyer X Productions</a>

    </div>
  </header>
  <nav id="topNavigation">
    <ul id="topNav">
      <?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?>
    </ul>
  </nav>

front-page.php

<?php  

/**
 *
 * Template file used to render the Site Front Page, whether 
 * the front page displays the Blog Posts Index or a static 
 * page. The Front Page template takes precedence over the 
 * Blog Posts Index (Home) template.
 *
 */

?>
<?php get_header( ); ?>
  <section id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in vehicula lacus, quis interdum metus. Aenean fringilla nunc risus, eget mollis nibh vehicula vel. Fusce sit amet diam fringilla, mollis nibh sit amet, consequat felis. Vestibulum viverra id arcu imperdiet adipiscing. Aenean eget malesuada risus. Proin lobortis enim non iaculis viverra. Ut in nibh interdum, iaculis nunc vitae, convallis nulla. Donec tincidunt imperdiet justo tempus fringilla. Sed eu lorem consequat, tincidunt ligula quis, pretium velit. Sed ac lorem justo. Aenean tempus lacinia magna, et viverra lacus accumsan eu. Vivamus in tristique metus. Pellentesque ut risus quis justo hendrerit condimentum nec ac turpis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in vehicula lacus, quis interdum metus. Aenean fringilla nunc risus, eget mollis nibh vehicula vel. Fusce sit amet diam fringilla, mollis nibh sit amet, consequat felis. Vestibulum viverra id arcu imperdiet adipiscing. Aenean eget malesuada risus. Proin lobortis enim non iaculis viverra. Ut in nibh interdum, iaculis nunc vitae, convallis nulla. Donec tincidunt imperdiet justo tempus fringilla. Sed eu lorem consequat, tincidunt ligula quis, pretium velit. Sed ac lorem justo. Aenean tempus lacinia magna, et viverra lacus accumsan eu. Vivamus in tristique metus. Pellentesque ut risus quis justo hendrerit condimentum nec ac turpis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in vehicula lacus, quis interdum metus. Aenean fringilla nunc risus, eget mollis nibh vehicula vel. Fusce sit amet diam fringilla, mollis nibh sit amet, consequat felis. Vestibulum viverra id arcu imperdiet adipiscing. Aenean eget malesuada risus. Proin lobortis enim non iaculis viverra. Ut in nibh interdum, iaculis nunc vitae, convallis nulla. Donec tincidunt imperdiet justo tempus fringilla. Sed eu lorem consequat, tincidunt ligula quis, pretium velit. Sed ac lorem justo. Aenean tempus lacinia magna, et viverra lacus accumsan eu. Vivamus in tristique metus. Pellentesque ut risus quis justo hendrerit condimentum nec ac turpis.
</p>
  </section>

<?php get_footer( ); ?>
</body>
</html>

footer.php

<footer id="footer">
  <nav id="bottomNavigation">
    <ul id="bottomNav">
      <?php wp_nav_menu( array( 'theme_location' => 'bottom-menu' ) ); ?>
    </ul>
  </nav>
  <div id="footerCopyright">
    <p>
    &copy; <?php echo date( "Y" ); ?> <a href="<?php bloginfo( 'url' ); ?>" title="Destroyer X Productions">Destroyer X Productions</a>.  All Rights Reserved.
    </p>
  </div>
</footer>

<!-- </div> -->
<!-- This is where the wrapper of the Website ends -->

<!-- JavaScript at the bottom for fast page loading -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->
<!-- <script>
   window.jQuery || document.write('<script src="<?php bloginfo( 'url' ); ?>/wp/wp-content/themes/christophereastman/js/vendor/jquery-1.10.2.min.js"></script>')
</script> -->

<!-- scripts concatenated and minified via build script -->
<script src="<?php bloginfo( 'url' ); ?>/wp/wp-content/themes/destroyerxproductions_1.0/js/plugins.js"></script>
<script src="<?php bloginfo( 'url' ); ?>/wp/wp-content/themes/destroyerxproductions_1.0/js/script.js"></script>
<!-- end scripts -->

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
   (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
   function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
   e=o.createElement(i);r=o.getElementsByTagName(i)[0];
   e.src='//www.google-analytics.com/analytics.js';
   r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
   ga('create','UA-XXXXX-X', 'destroyerx.com');ga('send','pageview');
</script>
<?php wp_footer( ); ?>