【原创】完美解决HTML中footer保持在页面底部问题

制作页面时，footer需要保证在页面最底端，需要达到的效果是，不论页面长短，footer都要在最底部显示，即页面长，滚动到页面末尾时看到footer；页面短，footer则固定在最底部

<div id="container">

<div id="header"></div>

<div id="main"></div>

<div class="footer"></div>

</div>

css中样式为：

#container{
/*保证footer是相对于container位置绝对定位*/
position:relative;
width:100%;
min-height:100%;
/*设置padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；*/
padding-bottom: 200px;
box-sizing: border-box;
}

.footer{
    background:#1a1a1a;
    padding:3em 0;
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
}