Question

我有一个div，我用它作为页脚来显示一些内容。我把风格设为：

.pageFooter{
    position:absolute;
    bottom:0px;
    width:100%;
    height:25px;
    background:#e6e6e6;
}

当页面正文中没有内容时，此样式很有效。但是当我用内容填充页面时，比如datagrid，div与datagrid中的数据重叠。我应该对样式做出哪些改变，让div始终位于底部。我正在使用IE *来查看页面。

Answer 1

body, html {
    height:100%;
    margin-bottom:25px;
}

Answer 2

这可能会对您有所帮助http://www.cssstickyfooter.com/

Answer 3

最佳方法：

html, body { height: 100%; }

.wrapper {
    min-height: 100%;
    _height: 100%; /* hack for IE6 */
    margin-bottom: -100px; /* height of the footer */
}

.wrapper-inner { padding-bottom: 100px; }

.footer { position: relative; height: 100px; overflow: hidden; }


<body>
<div class="wrapper">
    <div class="wrapper-inner">
        Content
    </div>    
</div>
<div class="footer">
    Footer
</div>
</body>

Doctype应该是严格的或过渡的xhtml。

在页面底部的div

3 个答案: