使用带有自定义 WordPress 布局的粘性 CSS 页脚

Question

正如标题所暗示的，我在为自己设计的网站使用 CSS 粘性页脚时遇到了问题（这将是我使用液体和固定组合的第一个网站 -不使用表格的宽度布局；我的大多数布局都专注于固定宽度布局）。我尝试使用我在http://www.cssstickyfooter.com/、Ryan Fait 的网站和https://code.google.com/p/cleanstickyfooter/ 上找到的解决方案，但每次我将这些解决方案中的任何一个与我的 CSS 一起使用时，都会在包装器和页脚之间产生太多空间即使包装器中只有三个测试器段落，也会出现滚动条。

基本上，我想要做的是使页脚保持粘性而不出现滚动条，除非生成的内容足够值得滚动条。此外，我想在不给页脚固定位置的情况下完成此操作。

老实说，我现在有点难过，所以这就是我最终加入该网站寻求帮助的原因。我不确定来自 WordPress 或 HTML5 Boilerplate 的某些编码是否给我带来了麻烦，但如果有人可以为我提供解决方案，我将非常感谢您的建议。

非常感谢您的时间和合作。

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( ); ?>

Answer 1

这是一个解释它的CodePen。这是really simple JSFiddle，可能更清楚。

我也花了几个月的时间试图解决这个问题。基本上......有5件事在起作用。

1. 您必须让 HTML 和正文知道它们可以是 100% 的高度。
2. 你必须告诉.master-container 它需要最小高度：100%
3. 你需要一个footer-buffer div（在.master-container 的末尾）
4. 您的页脚必须在master-container 之外
5. 您需要在主容器底部设置一个负边距，该边距与页脚和页脚缓冲区的高度相同。

现在，如果您正在制作一个非常流畅且灵活的响应式设计等，您将不会有页脚高度等特殊数字。它将会发生变化。此时，您有两个选择，-您可以决定绝对高度并为它们设置一系列断点，（如果它适合项目，那就不要羞耻）或者，您可以使用一点点 jQuery

var watchFooter = function() { // makes a function that finds the magic number

  // store that number in this variable
  var footerHeight = $('.global-footer').outerHeight();

  // Share that number with the dependent parts of the DOM 
  $('.footer-buffer').css('height', footerHeight);
  $('.master-container').css('margin-bottom', -(footerHeight));

};

//run the function when the dom is ready
$(document).ready(watchFooter);

//also, run the function if the browser changes size
$(window).resize(watchFooter);