Question

我在构建完网站之后尝试实现CSS粘性页脚，但它运行不正常，可能是因为我还没有找到一些预先存在的代码。似乎#content的CSS根本没有被渲染，无论我试图为它声明什么。该网站位于iphonebuy-host1.gaiahost.net。 JSfiddle for iphonebuy-host1.gaiahost.net/thanks.html: http://jsfiddle.net/TqCYh/1/

（stackoverflow代码插入小部件现在无法正常工作，对于下面粘贴的荒谬代码感到抱歉！）

 * {
    border:0;
    margin:0;
    padding:0;
  }

    html, body {
    height:100%;
  }

    /** body **/
    body {
    font-size:100%;
    font-family:arial, sans-serif;
    line-height:1.3em;
    color:#666;
    width:100%;
    background-image:url(images/greystripe.png);
    background-repeat:repeat;
  } 

    /** link styles **/
      a,
      a:link,
      a:active,
      a:hover,
      a:visited {
      text-decoration:none; 
      outline:none;
  }

      a:link, a:visited {
      color:#0071BC;
  }

      a:hover, a:active {
      color:#99CCCC;
  }

    /** text heading styles **/

      h1 {
    font:1.5em arial, sans-serif;
    color:#A09F9F;
        margin:1.2em 0 0 .7em;
  }

      h2 {
    font:1.5em arial, sans-serif;
    color:#95DF00;
    margin-bottom:.5em;
  } 

       h3 {
        font:1.5em "arial black", sans-serif;
    color:#95DF00;
    padding-bottom:.5em;
  }

      h4 {
    font:bold 1.313em arial, sans-serif;
    color:#666;
  }

      h5 {
    font:1em "arial black", sans-serif;
    color:#95DF00;
    margin:0;
    padding:0;
  }

    /** for paragraph text **/
      p {
    font:1em arial, sans-serif;
    line-height:1.3em;
    text-align:justify;
    color:#A09F9F;  
    margin-bottom:.5em;
    padding:0;
  }

    /** main (container for everything) **/
      #main {
        background:#FFF;
    width:62em;
    min-height:100%;
        text-align:left;
        margin:0 auto;
    padding:0.5em 1em 3em 1em;
    -moz-box-shadow:0 0 8px 2px #ccc;
        -webkit-box-shadow:0 0 8px 2px #ccc;
        box-shadow:0 0 8px 2px #ccc;
        behavior:url(/pie/PIE.htc);
  }

      .clearfix {
        display: inline-block;
  }

      .clearfix:after {
        content: "\00A0";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
  }

      * html .clearfix {
          height: 1%;
  }

      .clearfix {
        display: block;
  }

    /** header **/
      #header {
    height:5.5em;
    margin:0 0 0 1em;
  }

      #logo {
        margin-left:-.7em;
        border:0;
  }

    /** top & bottom navigation menus **/
      .topnav {
        list-style:none;
        font:1.313em arial, sans-serif;
        color:#0071BC;
        margin:-1.8em 0 1.2em 25em;
        text-align:center;
  }

      .topnav li {
        position:relative;
        display:inline;
        padding:0 .5em;
        border:none;
  }

      .topnav a, .bottom-nav a { 
        display:inline-block;
  }

      .bottom-nav {
        float:left;
        list-style:none;
        font:1em arial, sans-serif;
        padding-top:1em;
  }

      .bottom-nav li {
        display:inline;
        padding:0 .5em;
        margin-top:-2em;
  }

    /** container for content between header and footer **/
      #content {
        min-height:100%;
        overflow:auto;
        padding-bottom:30px;
  }

    /** footer **/
      #footer {
        margin-top:-30px;
        padding:0 1em;
        width:62em;
        height:30px;
        color:#999;
        position:relative;
        clear:both;
  }

    /** Opera Fix for sticky footer **/
       body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

      .paypal {
        display:block;
        margin:-2em 3em 0 19em;
        padding-top:2em;
  }  

      .copyright {
        margin:-3em 0 0 38.7em;
        font-size:.9em;
        color:#999;
  }

    /** for horizontal line under header and above footer **/
      hr.styled { 
        border:0; 
        height:0;  
        width:60em;
        border-bottom:1px solid #E6E6E6;
  }  

      hr.footer { 
        border:0; 
        height:0;  
        width:60em;
        border-bottom:1px solid #E6E6E6;
        margin-bottom:1em;
  } 

    /** for vertical lines between menu items and 3 steps **/  
      .vertical-line {
      border-right:1px solid #E6E6E6;
      padding:0 1.5em 0 0;
  }

    /** thank you page **/
      #thanks {

  }

      #thanks h1, #thanks p {
        margin:1.5em;
        text-align:center;
  }

Answer 1

我通常使用Ryan Fait的技术，如http://ryanfait.com/sticky-footer/

所述

要将此应用于您的代码，您必须执行以下操作： - 将页脚从主div中移出，并将其直接放在主体中。您只能在正文，主内容容器和页脚中包含两个包装器。 - 在主div的底部添加一个额外的空div，并给它一个像footer-push这样的ID - 将以下内容添加到您的CSS中：

#main {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    padding: 0;
    margin: 0 auto -100px;
}
#footer, #footer-push {
     height: 100px;   
}
html, body {
    height: 100%; 
    margin: 0;
    padding: 0;
}

这应该可以解决问题。亲眼看看：http://jsfiddle.net/TqCYh/3/

我知道这种技术要求你添加一个空的div，这可以被认为是“脏”的。因为你正在添加专门用于样式目的的标记，但技术很简单，并且可以很好地跨浏览器（IE7 +）。必须为IE或Opera或其他任何东西添加特殊代码也是脏的imo。

无论如何，这种技术对我很有用，我一直都在使用它。希望它符合您的需求。

Answer 2

在我们开始抨击其他人的代码之前：

而不是在外面添加一个空div，试试这个 -

HTML：

<div class="wrap">
  <div class="inner-wrap">
  ...
  </div>
</div>
<footer>
...
</footer>

的CSS：

html, body {height:100%;}
.wrap {min-height:100%; height:auto !important; margin-bottom:-100px;}
.inner-wrap {padding-bottom:100px;}
footer {height:100px;}

应该没有空div。

div由于某种原因没有渲染的CSS？我认为粘性页脚是个问题。

2 个答案: