尽管内容大小，如何使页脚粘在底部？答案

【问题标题】：How to make footer stick to bottom despite size of content?尽管内容大小，如何使页脚粘在底部？
【发布时间】：2014-11-23 03:34:06
【问题描述】：

我有这个 CSS 代码：

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

#main {}

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

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

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

请帮忙

【问题讨论】：

ryanfait.com/html5-sticky-footer
它只是让它变大不粘
这个问题已经在 SO 上回答了很多次。发帖前请先搜索。
philipwalton.github.io/solved-by-flexbox/demos/sticky-footer 是迄今为止我找到的最佳解决方案。当然，它不适用于旧版浏览器。

标签： css footer sticky-footer

【解决方案1】：

一个更简单更整洁的方法：

HTML

<div id="main-wrapper">
    <div id="content">Main content</div>
    <footer>Footer content</footer>
</div>

CSS

#content {
    min-height: 50vh; /*adjust to find the one that suits your content*/
}

【讨论】：

【解决方案2】：

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;
}

【讨论】：

即使内容溢出屏幕，页脚也会一直粘在底部