跨瀏覽器得到窗口大小，可以讓整個頁面鋪滿瀏覽器可見視圖大小，可通過設置CSS中的元素屬性width：100%；height：100%（繼承於父元素寬和高）來解決。但最近做了一頁面，頭部的高度已經確定，想要實現除頭部以外頁面鋪滿剩下的可見視圖大小，通過設置width：100%，可以讓寬度鋪滿整個屏幕,而想要高度能夠鋪滿，我的一種解決方法是通過獲取當前的視口大小減去頭部的高度來實現，下面是具體的實現方法及原理介紹。
IE9+，FireFOX,Safari,Opera和Chrome提供了四個屬性：innerWidth、innerHeight、outerWidth、outerHeight.在IE9+，FireFOX,Safari中outerWidth、outerHeight表示返回瀏覽器本身的尺寸，在Opera中，這兩個屬性的值表示頁面試圖容器的大小，而innerWidth和innerHeight則表示該容器中頁面視圖區的大小（減去邊框寬度），在Chrome中innerWidth、innerHeight、outerWidth、outerHeight返回的值相同，即視口的大小而非瀏覽器窗口大小。
IE8及更早的版本沒有提供這個屬性，但是它通過DOM提供了頁面可見區域的相關信息。在IE,FireFox，Safari,Opera和Chrome中，document.documentElement.clientWidth和document.doucumentElement.clientHeight保存了頁面視口的信息，在IE6中，這些屬性必須在標準模式下才有效；如果是混雜模式，就必須通過document.body.Width和document.body.Height取得相同的信息，而對於混雜模式下的Chrome，通過這兩種方法都可以取得視口的大小。好的兼容性代碼如下所示。
var pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
if(typeof pageWidth!="number"){//檢查pageWidth是否是一數值
if(document.compatMode=="CSS1Compat"){//檢查頁面是否處於標準模式
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}
else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}對於移動設備，window.innerWidth和window.innerHeight保存着可見視口，也就是屏幕上可見頁面區域的大小，但移動IE瀏覽器不支持這些屬性，通過document.documentElement.clientWidth和document.documentElement.clientHeight提供了相同的信息，隨着頁面的縮放，這些值也會相應變化。對於移動設備視口比較複雜，它區別去桌面瀏覽器，最好要先檢測用戶是否在使用移動設備，再決定使用哪個屬性。有關移動web開發，可以參考閱讀這篇文章http://t.cn/z0ZS0Tz
