页面内容不足以铺满屏幕高度时，footer局地显示

做项目的时候经常碰到这个问题：在主要内容不足以铺满整个屏幕的情况下，footer不贴合屏幕底部。
实现：
在主要内容不足以铺满整个屏幕的情况下，footer显示在屏幕底部，使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，footer跟随主要内容进行显示；

我的footer高度是100px

html

<div class="content">
主要内容
</div>
<footer class="footer">底部</footer>

css

html,body{
  height:100%;
  margin:0;
  padding:0;
}
.conetent:{
    min-height:100%;
    box-sizing: border-box;
    padding-bottom:100px;
}
.footer{
    margin-top:-100px;
    height:100px;
}