问题:
总是有这样的需求，就是页面上某部分要位于页面的最底部，此“最底部”要求：（1）当页面上内容不足一屏的时候，在最底部显示（2）当页面上内容不止一屏的时候，也就是有垂直滚动条的时候，要在内容的最后显示
最容易想到的定位方法：
（1）position:absolute
position:absolute;
bottom:0;
left:0
此种方法只能把该元素定位到第一屏的最底部，它并不会随着滚动条的出现跑到内容的最后面去。满足（1）不满足（2）
（2）position:relative
此种方法只能满足（2），不能满足（1），当然要满足（1）的话，可以配合使用js, 思路是利用JS计算屏幕高度，减去底部高度，设定除底部的其他元素的高度。
最简单的方法（需要支持CSS3的box-flex属性）：
利用box-flex属性就可以实现上面提到的需求，见下面的代码：
<style>
.con{
position: absolute;
height: 100%;
width: 100%;
top:0;bottom: 0;left: 0;right: 0px
}
.wrap{
min-height: 100%;
width: 100%;
position: relative;
/**父元素display设置为box**/
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:box;
/**父元素的布局是垂直方向**/
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
box-orient:vertical;
-moz-box-align:center;
-webkit-box-align:center;
-o-box-align:center;
box-align:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
box-pack:center;
}
.main{
background-color: blue;
color: #fff;
width: 100%;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.footer{
background-color: green;
width:100%;
height: 30px;
}
</style>
<div class="con">
<div class="wrap">
<div class="main"></div>
<div class="footer"></div>
</div>
</div>
这样，footer 就以30px的像素告诉一直位于页面的底部，并且满足（1），满足（2）