css經典布局—stick footer布局

需求:將footer固定到底部。文章內容不足滿屏時 footer在底部，超過滿屏時footer在內容末尾。

html部分

<div id="wrap">
	<div id="main" class="clearfix">
		<div id="content"></div>
		<div id="side"></div>
	</div>
</div>
<div id="footer"></div>

css部分

<style>
*{padding: 0;margin: 0;font-size:20px;}
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必須使用和footer相同的高度 */
#footer {position: relative;margin-top: -150px; /* footer高度的負值 */height: 150px;clear:both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
</style>