页面滚动时粘滞页脚问题

Question

我已根据此页面应用了粘性页脚：

https://css-tricks.com/snippets/css/sticky-footer/

它工作正常，但我的设计是响应性的，页面高度增长大于屏幕高度，但页脚仍然粘。换句话说，无论我有多少内容，页脚仍然从底部开始（在此示例中）142 px。

如果页面高度小于屏幕高度，我想要的是粘性页脚，但如果页面高度较大，我只想让页面滚动到页脚。

* {
    margin: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
.content {
    min-height: 100%;
    max-width:1220px;
    margin:0 auto -124px auto;
}

.footer, .content:after {
    height: 124px; 
}

.footer {
    width: 100%;
    background-color: #FFFFFF;
}    

<div class="content">content here....</div>
<div class="footer">footer here...</div>