Question

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

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

它在我的电脑上完美运行，但我在其他电脑上看不到它我的测试。同样精确的设置，图像的路径就在那里。我似乎无法想象，我觉得我要去香蕉了！

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;

}

Answer 1

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

显而易见的是，您的HTML已损坏（正文和包装永不关闭），并且“.clearfix”（未在已发布的CSS中定义，顺便说一句）在整个地方都应用。

Answer 2

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

<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>

Answer 3

您将在此github存储库（Bredele css sticky footer）上找到两个版本的粘性页脚：一个带有标题，另一个没有。

这两个版本都使用display：table（与IE8和IE6 / 7一起使用polyfill），没有额外的标记， no clearfix （而不是CssStickyFooter）和灵活的内容高度。

希望它会有所帮助！

奥利弗

粘性页脚让我疯了 - 请帮帮忙？

3 个答案: