css - 尽管内容很大，如何使页脚粘在底部？

Question

我有这个 CSS 代码:

#main-wrapper {min-height: 300px;}

#main {}

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

我试过了:clear:both;底部:0；位置:固定；宽度:100%；对于页脚..

但它只适用于短内容显示..当页面内容太长时，我必须向下滚动页面到页脚..

请帮忙

Answer 1

see the example code here

HTML

<div id="main-wrapper">
    <div id="content"> content of any length</div>
    <div id="footer">Footer</div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}
#content {
    margin-bottom: 30px;/*same as footer height*/
}
#footer{
    position: fixed;
    bottom:0;
    height: 30px;
    background: #eee;
    width: 100%;
    text-align: center;
}