Question

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

Answer 1

你需要这样的东西吗？

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

http://jsbin.com/ayaqo4

Answer 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 */
  }

Answer 3

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

http://www.cssstickyfooter.com/

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

Answer 5

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

只需实施此处的代码http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

即可

在页面底部的div？

5 个答案: