页面底部的div？答案

【问题标题】：div at bottom of the page?页面底部的div？
【发布时间】：2011-02-02 07:08:28
【问题描述】：

如何在页面底部显示大约 100 像素高度的 div.bottom。如果内容高度小于窗口高度，div.bottom 将显示在窗口底部。如果内容的高度大于窗口的高度，它将显示在页面底部。

【问题讨论】：

【解决方案1】：

你需要这样的东西吗？

<div style="position:absolute; bottom:0;">Hi</div>

http://jsbin.com/ayaqo4

【讨论】：

这是否需要您绝对定位其他所有内容？如果您不小心，这似乎会掩盖事情。
不，在这种情况下，当我向下滚动页面时，div.bottom 会向上移动。

【解决方案2】：

您所说的称为粘性页脚，只需 html 和 css 即可完成。基本思想是使用带有heights: 100% 和负边距的包装器将其移动到最底部上方。 Stole the code snippet from here 和 here:

<body>
    <div class="wrapper">content here!
         <div class="push"></div>
    </div>

    <div class="footer">footer content</div>
</body>

* {

    margin: 0;
  }
  html, body {
    height: 100%;
  }
  .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
  }
  .footer, .push {
    height: 142px; /* .push must be the same height as .footer */
  }

【讨论】：

【解决方案3】：

这是我个人最喜欢的粘性页脚：

http://www.cssstickyfooter.com/

【讨论】：

【解决方案4】：

你需要用到css，

div.pos_fixed_footer{
    position:fixed;
    bottom:0%;
    right:0px;
    background:transparent url(../img/bg_header.png) repeat scroll center top;  
    width:100%;
    height:40px;
}

然后像这样调用你的脚本

<div id="pos_fixed_footer"><?php include "footer.html"; ?></div>

【讨论】：

【解决方案5】：

我认为你的意思是只有在内容没有溢出窗口时才会在窗口底部的页脚，否则它必须在页面上向下。

只需从这里实现代码http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

【讨论】：