Question

我正在使用这个解决方案，它之前对我有用：

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

我目前正在开发一个网站，但它无法运行。我认为这是因为我在页面上的某些div上使用绝对位置。页脚显示在页眉底部，位于绝对定位的div之上，而不是粘在页面底部。如何在这种情况下使用粘性页脚？

<div id="wrap">
        <div id="container">

            <div id="myDiv">
               ...content...
               ... this div is absolutely positioned
            </div><!-- END aboutText -->

        </div><!-- END container -->
   <div class="push"></div>

</div><!-- END wrap -->
<div id="footer">
    ...footer content
</div>

实际上它现在正在运作。不知道为什么 - 这些CSS之谜。这是一个相关的问题 - 如何设置最小浏览器高度，以便当有人调整浏览器大小（使其缩小）时，页脚会停止向上移动并覆盖内容？

编辑 - 这是CSS。页脚粘到底部很好，但如果浏览器窗口很小，它会覆盖页面上的内容div。

html, body {
    height: 100%;
}


#wrap{
    width:950px;
    margin: 0 auto -80px;
    min-height: 100%;
    height: auto !important;
    height: 100%;

}


.push {
     height: 80px;

 }

#footer{
     height: 80px;
     background-image:url(../images/img.jpg);

}

#container{
    position:relative;
}



#someDivWithinTheContainer{
    position:absolute;
    left:230px;
    top:300px;
}

Answer 1

正确答案是位置固定，但IE6不支持该属性。

Answer 2

这是我用于在底部粘贴页脚的内容。使用此方法，无论窗口有多小，页脚都不会重叠内容。如果您编辑它，请确保#body div上的填充底部大于#footer div的高度 - 这是防止重叠的原因。我没有任何页面内容绝对定位，所以我不知道它的表现如何;对于浮动内容，自然需要在它之后有一个清除块，否则#body div会缩小。

CSS：

html, body {margin:0;padding:0;height:100%;}
#container {min-height:100%;position:relative;}
#body {padding:10px;padding-bottom:2em;zoom:1;}
#footer {position:absolute;bottom:0;width:100%;height:1em;}

HTML：

<body>
  <div id="container">
    <div id="body">
      (body contents)
    </div><!-- #body -->
    <div id="footer">
      <p>(footer text)</p>
    </div><!-- #footer -->
  </div><!-- #container -->
</body>

然后为了修复IE6，我添加了一个条件评论：

<!--[if lt IE 7]>
<style type="text/css">
#container {height:100%;}
</style>
<![endif]-->

拥有doctype声明也很重要，因此IE将处于标准模式，而不是怪癖模式。

Answer 3

修复了相对于窗口框架的元素的位置，忽略了页面正文中发生的任何滚动。

人们有时会使用绝对，因为它是相似的，但却不同。

关于“绝对”的最大误解之一是它绝对位于页面内（至少基于我最近采访过的所有人）。不是。绝对意味着元素绝对位于其最接近的“定位”元素内 - 任何没有“position: static”的元素（默认值）。如果你没有其他任何东西，那么就像你期望的那样，它就是身体。一旦开始使用位置，您将更改元素相对于的内容。

我怀疑这是你遇到的。

CSS Sticky Footer - 如果你在页面上有绝对定位的div，该怎么办？

3 个答案: