在擁有個人中心類型的網站中，無論是響應式還是手機版都繞不過一個尷尬的問題，那就是內容區無法撐起手機一屏高度。
為此我整理了兩種簡單的方法來讓頁面最小高度為一屏高度。
一、利用jq/js獲取高度計算
首先一個頁面可以分為三個區域，頭部區，主體內容區，底部區。
頭部區域一直浮動在頂部，和底部區域一樣高度不會變化。所以我們只需要獲取到屏幕高度然后減去頭底部高度就是內容區域的最小高度。
$
(
function
(){
var
winH
=
$
(
window
).
height
();
//獲取當前視口高度
var
htmlH
=
$
(
document
).
innerHeight
();
//獲取當前html高度
var
headerH
=
$
(
'header'
).
innerHeight
();
//獲取當前頭部高度
var
footerH
=
$
(
'footer'
).
innerHeight
();
//獲取當前底部高度
if
(
htmlH
<
winH
){
//進行判斷
$
(
'main'
).
height
(
winH
-
headerH
-
footerH
);
//設置主體內容高度
}
})
這樣就可以通過jq讓所有頁面最小高度不會小於手機一屏，js同理使用相同的邏輯即可。
二、利用css中vh單位
vh是css規定的一種視口單位，1vh等於視口高度的1%。
所以我們通過css的計算方法calc就可以輕松設置內容區域的最小高度了。不過需要注意的是無論是calc還是vh都對於低版本的瀏覽器不支持，所以要兼容低版本的話還是選擇js會更為方便。
<style>
.header{
height: 100px;
}
.footer{
height: 100px;
}
main{
min-width: calc(100vh - 200px); //注意空格，沒有空格會影響到ie部分兼容
}
在不考慮低版本ie兼容下個人比較推薦第二種，畢竟js會浪費部分性能，能用css解決的效果和問題盡量不要使用js。