让网页的页脚始终待在最下方

html和body的高度并不一定相同，在内容少的时候，body的高度要小于html，当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候，此时html的高度大于body的高度。网页中的元素都是以body最为参考，所以有必要保持html和body的高度相同。

html,body{height:100%;}

第一种方法：
在body中使用两个容器，包括网页的页脚和另外一部分（container）。设置container的高度为100%；页脚部分使用 负外边距 保持其总是在最下方。

html, body {
	height:100%;
}
.fl {
	float:left;
	display:inline;
}
#container {
	width:100%;
	height:300px;
	overflow:hidden;
	height:100%;
	border-bottom:70px #FFFFFF solid;
}
.aside {
	width:30%;
}
.article {
	width:70%;
}
#footer {
	height:50px;
	width:100%;
	clear:both;
	margin-top:-50px;
	border-bottom:1px solid #e0e0e0;
	border-top:1px solid #e0e0e0;
}

<div id="container">
	<div id="header">
		<div>
			<img src="" width= height= alt="" />
        	<div>
        		<p>fddfv</p>
            		<p>容量：<span>24M</span>/<span>2G</span></p>
       	 	</div>
		</div>
	</div>
	<div class="aside fl"> dsfcndsjkcnsd</div>
    <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>
</div>
<div id="footer">footer</div>

第二种方法：使用绝对定位

同样需要保持html和body的高度相同，并且body需要添加另外的一些样式，footer需要使用绝对定位

body{position:relative;height:auto !important;height:100%;min-height:100%;}

html {
	height:100%;
}
body {
	margin:0;
	padding:0;
	position:relative;
	height:auto !important;
	height:100%;
	min-height:100%;
	text-align:center;
}
.fl {
	float:left;
	display:inline;
}
#header {
	width:100%;
	height:80px;
}
#container {
	width:100%;
	height:300px;
	overflow:hidden;
	border-bottom:#FFFFFF 60px solid;
}
.aside {
	width:30%;
}
.article {
	width:70%;
}
#footer {
	height:50px;
	position:absolute;
	width:100%;
	clear:both;
	bottom:0;
	left:0;
	border-bottom:1px solid #e0e0e0;
	border-top:1px solid #e0e0e0;
}

<div id="header">
	<div>
		<img src="" width= height= alt="" />
        <div>
        	<p>fddfv</p>
            <p>容量：<span>24M</span>/<span>2G</span></p>
        </div>
	</div>
</div>
<div id="container" style="border-bottom:#FFFFFF 60px solid;">
	<div class="aside fl"> dsfcndsjkcnsd</div>
    <div class="article fl">cdsklcmdskcmkdslcmksdlckldsmcskl</div>
</div>
<div id="footer">footer</div>

第一种方式，不论内容占据的空间相对浏览器视口多高，浏览器侧面的滚动条总是会出现。第二种则使用了 ！importent，但是侧面的滚动条旨在需要的时候出现。两种方法的共同点是都有一个比footer高度相等或稍大的下边距。