窗口模块自适应高度

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>

 

posted @ 2015-10-09 11:47  lunawzh  阅读(583)  评论(0)  编辑  收藏  举报