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>