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

【问题标题】：CSS Sticky Footer - what if you have absolutely positioned divs on the page?CSS Sticky Footer - 如果你在页面上有绝对定位的 div 怎么办？
【发布时间】：2014-03-24 20:26:32
【问题描述】：

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

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

【问题讨论】：

这是一个 CSS 问题。你能发布相关的 CSS 吗？
请使用相关详细信息编辑您的问题，而不是像您在下面所做的那样在“答案”中发布其他详细信息。

标签： css html sticky-footer

【解决方案1】：

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

【讨论】：

【解决方案2】：

这是我用于将页脚粘贴在底部的方法。使用这种方法，无论窗口变得多小，页脚都不会与内容重叠。如果您对其进行编辑，请确保 #body div 上的 padding-bottom 大于 #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 将处于标准模式，而不是怪癖模式。

【讨论】：

【解决方案3】：

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

人们有时会使用absolute，因为它相似但不同。

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

我怀疑这就是你遇到的问题。

【讨论】：