html和body的高度并不一定相同，在內容少的時候，body的高度要小于html，當然這只會出現在body中的內容所占的空間高度小于瀏覽器的視口高度的時候，此時html的高度大于body的高度。網頁中的元素都是以body最為參考，所以有必要保持html和body的高度相同。
html,body{height:100%;}
1. 第一種方法
在body中使用兩個容器，包括網頁的頁腳和另外一部分（container）。設置container的高度為100%；頁腳部分使用 負外邊距 保持其總是在最下方。
css 部分:
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;
}
html 部分
<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>
2. 第二種方法:使用絕對定位
這里我們使用到了position屬性，讓我們先來回顧一下position的基礎用法：
position有四個參數：static | relative | absolute | fixed
- position:static，意味元素沒有被定位，元素會出現在文檔本該出現位置，是頁面元素默認的定位的方式，一般無需指定，除非想要覆蓋之前設置的定位。
- position:relative,很明白，相對元素本該位置的偏移量
#nav{
position:relative;
top:15px;
left:20px;
}
- position:absolute,這時候元素已經脫離了文檔，文檔中已經沒有自己的本該的位置了，但我們可以通過left、bottom、left和right來規定其在文檔中位置。
#nav{
postion:absolute;
botton:0px;
}
我們知道萬物都是相對的，元素進行上面設置了后就保證nav元素始終保持在底部了呢？nav元素離botton為0px,是哪個為參照物呢，是父級元素還還是瀏覽器呢，其實這里分為兩種情況：
如果父級元素（父級元素的父級、父級的父級的父級......）設置postion時，則子元素此時相對的是父級的，所以當內容過多時，腳DIV不能被擠到底部去。
如果父級元素（父級元素的父級、父級的父級的父級......）沒有設置postion時，則子元素此時相對的是瀏覽器的，所以當內容過少時，腳DIV不能被擠到底部去。
好了，下面回到正題，同樣需要保持html和body的高度相同，并且body需要添加另外的一些樣式，footer需要使用絕對定位。
css代碼如下:
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;
}
html 代碼:
<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>
3. 第三種方法:采用flexbox
flexbox——CSS3提供的一種先進布局模型，旨在建立具有適應性的布局。如果你對 flexbox 還不怎么熟悉，文章最后有一些擴展閱讀鏈接，可以幫助你了解 flexbox。
我們的頁面應該具備 Header、主體內容區域和 Footer，下面是該頁面的 HTML
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
為了啟用 flex模式，我們將 body 的 display 屬性設置為 flex, 然后將方向屬性設置為列, （默認是行，也就是橫向布局）。同時，將html 和 body 元素的高度設置為100%，使其充滿整個屏幕。
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
現在，我們需要調整各個區域占用的頁面空間，我們將通過flex 屬性來達到這一目的，該屬性實際包含了三個屬性，分別是：
- flex-grow：元素在同一容器中對可分配空間的分配比率，及擴展比率
- flex-shrink：如果空間不足，元素的收縮比率
- flex-basis：元素的伸縮基準值
我們希望 header 和footer 只占用他們應該占用的空間，將剩余的空間全部交給主體內容區域
header{
/* 我們希望 header 采用固定的高度，只占用必須的空間 */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* 將 flex-grow 設置為1，該元素會占用全部可使用空間
而其他元素該屬性值為0，因此不會得到多余的空間*/
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* 和 header 一樣，footer 也采用固定高度*/
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
這樣footer 會始終顯示在頁面的最底部。
4. 總結
如你說見，如果是從零開始構建布局，flexbox 將會是你的得力助手。除了極少數的例外，所有的主流瀏覽器都支持 flexbox，就 IE 來說，IE9以后的版本都是支持的。
下面是一些學習 flexbox 布局模型不錯的教程和速查表
- CSS-Trick 的 flex box 快速指南
- 一個專門提供酷炫 flexbox 技術的網站：Solved by Flexbox
- 5分鐘互動教程
