0

在我已经构建了我的网站并且它无法正常工作之后，我尝试实现 CSS 粘性页脚，这可能是因为我还无法确定一些预先存在的代码。似乎 #content 的 CSS 根本没有被渲染，无论我尝试为它声明什么。该站点位于 iphonebuy-host1.gaiahost.net。iphonebuy-host1.gaiahost.net/thanks.html 的 JSfiddle：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;
  }
4

2 回答 2

1

我通常使用来自 Ryan Fait 的技术，如此处所述http://ryanfait.com/sticky-footer/

要将其应用于您的代码，您必须执行以下操作： - 将页脚移出主 div，并将其直接放在正文中。正文中只能有两个包装器，即主要内容容器和页脚。- 在主 div 的底部添加一个额外的空 div，并给它一个 ID，如 footer-push - 在你的 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 添加特殊代码。

无论如何，这项技术对我来说非常有用，我一直都在使用它。希望它适合您的需要。

于 2013-06-05T19:04:44.860 回答
0

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

而不是在外面添加一个空的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 的情况下做到这一点。

于 2013-08-13T16:02:56.487 回答