0

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

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

它在我的电脑上完美运行，但在我测试的其他电脑上看不到它。完全相同的设置，图像的路径就在那里。我只是似乎无法弄清楚，我觉得我要去香蕉了！

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;

}
4

3 回答 3

3

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

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

于 2009-10-07T23:56:26.483 回答
1

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

<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>
于 2013-01-30T19:49:12.600 回答
0

你会在这个 github 存储库（Bredele css sticky footer）上找到两个版本的sticky footers：一个有页眉，另一个没有。

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

希望它会有所帮助！

奥利维尔

于 2013-01-20T17:55:00.833 回答