2

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

4

5 回答 5

2

你需要这样的东西吗？

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

http://jsbin.com/ayaqo4

于 2011-02-01T15:11:04.360 回答
1

您所说的称为粘性页脚，只需 html 和 css 即可完成。基本思想是使用带有heights: 100%负边距的包装器将其移动到最底部上方。从这里和这里窃取代码片段：

<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 */
  }
于 2011-02-01T15:14:31.443 回答
1

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

http://www.cssstickyfooter.com/

于 2011-02-01T15:57:37.487 回答
0

你需要使用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>
于 2011-02-01T15:13:47.090 回答
0

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

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

于 2011-02-01T15:30:07.420 回答