在内容超出屏幕时，footer只有在滚动条拉直底部时才出现。当撑不满屏幕时，footer直接固定在底部。
主体区域 min-height:100%, 恰好把 footer 挤出一屏外，footer 本身使用负的 margin-top 往上提与 height 相同的距离，这时只需在主体区内部元素上添加 padding-bottom 把 footer 盖住的区域排开即可。
html:
<!DOCTYPE HTML> <html lang="en"> <head> <script id="jquery_182" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script> </head> <body> <div class="wrapper"> <div class="header">header</div> <div class="main"> <button id="add">add</button> <p>test test test</p> </div> </div> <div class="footer">footer</div> </body> </html>
css:
html{
height:100%;
}
body{
height: 100%;
margin: 0;
background: white;
}
.wrapper{
min-height:100%;
height:auto;
}
.main{
padding-bottom: 60px;
}
.footer,.header{
color: white;
text-align:center;
height: 60px;
line-height:60px;
background:#376AAE;
}
.footer{
margin-top:-60px;
}
p{
margin:0;
padding:10px;
background:white;
}
js:
$(function(){ $("#add").click(function(){ $(".main").append('<p>test test test</p>'); }); })
其实使用 css3 calc 的话，可以很简单地将vh和绝对单位混算，DOM结构就无需如此别扭了，直接 min-height: calc(100vh - 60px); 就好了
body{
margin: 0;
background: white;
}
.main{
min-height:calc(100vh - 120px);
}
.footer,.header{
color: white;
text-align:center;
height: 60px;
line-height:60px;
background:#376AAE;
}
p{
margin:0;
padding:10px;
background:white;
}