固定footer

by gothic

HTML

<div id="container">
	<div id="header">Header Section</div>
	<div id="page" class="clearfix">
		<div id="left">Left sidebar</div>
		<div id="content">Main content</div>
		<div id="right">Right sidebar</div>
	</div>
</div>
<div id="footer">Footer section</div>

CSS

html,body {
	                height: 100%;
					margin: 0;
					padding: 0;
				}

				#container {
					min-height: 100%;
					height: auto !important;
					height: 100%;
				}
				#page {
					padding-bottom: 60px;/*高度等于footer的高度*/
				}
				#footer {
					position: relative;
					margin-top: -60px;/*等于footer的高度*/
					height: 60px;
					clear:both;
					background: #c6f;
				}
				/*==========其他div==========*/
				#header {
					padding: 10px;
					background: lime;
				}
				#left {
					width: 18%;
					float: left;
					margin-right: 2%;
					background: orange;
				}
				#content{
					width: 60%;
					float: left;
					margin-right: 2%;
					background: green;
				}
				#right {
					width: 18%;
					float: left;
					background: yellow;
				}