前端遇到的问题及解决方案: 页面内容不足以铺满屏幕高度时，footer 居底显示: 要实现的效果就是，在主要内容不足以铺满整个屏幕的情况下，footer居于屏幕低部显示，使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候，footer跟随主要内容进行显示； 方法一： html
<div class="page"> 主要页面 </div> <footer>底部</footer> css
html,body{ height: 100%; margin: 0; padding: 0; } .page{ box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/ min-height: 100%; padding-bottom: 300px; } footer{ height: 300px; margin-top: -300px; opacity: 0.5; } 主要内容放在page内部，page最小高度为100%（注意这里html，body高度也要设为100%）。page有个padding-bottom大小为footer的高度（按需要调整），最重要的一点page的box-sizing:border-box，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，也就是说page的padding-bottom也会设定在min-height：100%内。而footer的margin-top为负的自身高度，把自己拉到page的padding-bottom空白块上，从而达到需求效果。
优点：简洁明了，没有冗余的div盒子；
缺点：box-sizing:border-box; 的兼容问题,ie7以下包括ie7不支持；
方法二： html
<div class="page-container"> <div class="page-main"> 主要页面 </div> <footer>底部</footer> </div> css
html,body{ height: 100%; margin: 0; padding: 0; } .page-container{ position: relative; min-height: 100%; } .