粘页脚让我发疯 - 请帮忙？答案

【问题标题】：Sticky footer driving me nuts - please help?粘页脚让我发疯 - 请帮忙？
【发布时间】：2010-12-04 19:48:53
【问题描述】：

我已经看这个好几天了，我一直在搜索和搜索，也许我只是看不到森林的树木，但如果有人能提供一些见解，我将非常感激。

好的，我有一个粘性页脚，它位于页面顶部并向下滚动页面，该栏始终位于屏幕底部。

它在我的电脑上完美运行，但在我测试的其他电脑上看不到它。完全相同的设置，图像的路径就在那里。我就是想不通，我觉得我要吃香蕉了！

html代码为：

<body id="home">
    <div class="wrap">
    <!-- Header -->
    <div id="header">
    </div>         
    <div id="slideshow-container"> 
        <div id="slideshow"></div>
        </div>
        <!-- // Header -->
        <div id="main" class="clearfix">      
    <!-- Content -->
    <div id="content">
  </div>
    <!-- // Content -->     
    <!-- Sidebar -->
    <div id="sidebar">                
    </div>            
    <!-- // sidebar -->         
    </div>
<!-- // Wrap end -->            
    <div id="footer" class="clearfix">
        <div class="wrap">
            <div class="clearfix">
                        </div>

        </div>
    </div>

好吧，你只是看不到图像......这是怎么回事 - 我感觉很弱智！

CSS：

body{
    background: url(../images/bg_body.png) center 0 #ffffff repeat-x;
    font-size: 62.5%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
    padding: 0 0 50px 0;    
    height: 100%;

#footer{
    background: url(../images/bg_footer.gif) center 0 repeat-x;
    position: relative;
    bottom: 0;
    width: 100%;    
    left: 0;
    right: 0;
    z-index: 1000;
}

#footer .wrap{  
    background: url(../images/bg_footer_wrap.png) center 0 no-repeat;
    padding: 7px 0 0 0;
    height: 70px;

}

【问题讨论】：

标签： footer sticky

【解决方案1】：

仔细查看CssStickyFooter.com 并将其与您的代码进行比较。

显而易见的是，您的 HTML 已损坏（body 和 wrap 永远不会关闭）并且“.clearfix”（未在发布的 CSS 中定义，顺便说一句）被应用到所有地方。

【讨论】：

【解决方案2】：

您会在这个 github 存储库 (Bredele css sticky footer) 上找到两个版本的粘性页脚：一个带有页眉，另一个没有。

这两个版本都使用 display:table（适用于带有 polyfill 的 IE8 和 IE6/7），没有额外的标记、没有 clearfix（而不是 CssStickyFooter）和灵活的内容高度。

希望对您有所帮助！

奥利维尔

【讨论】：

不会有人说您使用表格进行布局吗？就算是显示属性……

【解决方案3】：

今天找到了一个很棒的粘性页脚解决方案。希望它有所帮助，对我来说似乎是最简单的解决方案：

<style type="text/css">
   html,body {
      height:100%
   }

   #wrapper {
      min-height:100%;
      margin-bottom:-150px; /* negative total computed height of footer */
   }

   #footer_padding {
      height:150px; /* total computed height of footer */
   }

   #footer {
      height:100px;
      margin-top:50px;
   }
</style>    


<div id="wrapper">

   <div>some content...</div>

   <div id="footer_padding"></div>

</div>

<div id="footer"></div>

【讨论】：