視窗模組自適應高度

標籤：

JQuery:

$(document).ready(function(){
alert($(window).height()); //瀏覽器當前視窗可視地區高度
alert($(document).height()); //瀏覽器當前視窗文檔的高度
alert($(document.body).height());//瀏覽器當前視窗文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器當前視窗文檔body的總高度 包括border padding margin

alert($(window).width()); //瀏覽器當前視窗可視地區寬度
alert($(document).width());//瀏覽器當前視窗文檔對象寬度
alert($(document.body).width());//瀏覽器當前視窗文檔body的寬度
alert($(document.body).outerWidth(true));//瀏覽器當前視窗文檔body的總寬度 包括border padding margin

})

 

 

<!DOCTYPE html><html><head>    <script src="js/jquery-1.11.3.min.js"></script>    <style>        * {            margin:0;            padding:0;        }        body{            margin:0 auto;                    }        #header{            height:100px;            background:#444;        }                #footer{            background:#0094ff;            height:100px;        }        #container{            background:url(body_bg.gif);            min-height:400px;            max-height:600px;        }    </style>    <script>        $(function () {            $("#container").height($(window).height() - 200);            $(window).resize(function(){                  $("#container").height($(window).height() - 200);        });        });    </script></head><body> <div id="header">我是頭部</div>    <div id="container">    </div>    <div id="footer">        <p>            版本資訊：：：：：        </p>    </div></body></html>

 

視窗模組自適應高度