手机网页H5页面footer页脚显示在底部css代码

手机网页H5页面的footer页脚，当页面很短撑不满手机屏幕时可以显示在屏幕底部，当页面超出手机屏幕长度时，显示在页面内容的后面，不会遮挡内容。
css代码：

html{height:100%;}/*min-height不行，不知道为啥*/
body{min-height:100%;padding-bottom:50px;position: relative;box-sizing: border-box }
footer{text-align: center;color: #777;position: absolute;bottom: 10px;width: 100%;font-size: 14px;}

html：

<footer class="footer">  &copy; 版权所有 </footer>