通过 js 获取页面相关信息, js 代码如下
// get page scroll's size
function getPageScroll(){
var xScroll, yScroll;
if (self.pageYOffset) {
xScroll = self.pageXOffset;
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
}
// get page's size and window's size
function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
//document.write("page height is : " + pageHeight + " ");
} else {
pageHeight = yScroll;
//document.write("page height is : " + pageHeight + " ");
}
if(xScroll < windowWidth){
pageWidth = windowWidth;
//document.write("page width is : " + pageWidth + " ");
} else {
pageWidth = xScroll;
//document.write("page width is : " + pageWidth + " ");
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
// set object div id is "AutoDiv" size, full of window
function fnAutoDiv() {
var oDiv = document.getElementById("AutoDiv");
if (!oDiv) return;
var height = getPageSize()[3] - 2;
if (oDiv.addEventListener) {
oDiv.setAttribute("style", "height:"+height+"px");
} else {
oDiv.style.height = height;
}
}
// a method of AddEvent for all Brower
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType,fnHandler,false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
}
// add event to window's onload
addEventHandler(window, "load", fnAutoDiv);
addEventHandler(window, "resize", fnAutoDiv);
将以上写到 AutoSize.js 内。
参考 getPageSize() 方法,获取窗口大小后设置 div 大小。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=http://www.w3.org/1999/xhtml lang="gb2312">
<meta http-equiv="Content-Language" content="gb2312" />
<head>
<title>自适应大小</title>
<style>
body { margin:0px; padding:0px }
.clsAutoDiv { overflow:auto; word-wrap:break-word; white-space:normal; text-align:center; border: solid 1px lightblue}
</style>
<script src="AutoSize.js" type="text/javascript"></script>
</head>
<body>
<div id="AutoDiv" class="clsAutoDiv">test auto</div>
</body>
// get page scroll's size
function getPageScroll(){
var xScroll, yScroll;
if (self.pageYOffset) {
xScroll = self.pageXOffset;
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
}
// get page's size and window's size
function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
//document.write("page height is : " + pageHeight + " ");
} else {
pageHeight = yScroll;
//document.write("page height is : " + pageHeight + " ");
}
if(xScroll < windowWidth){
pageWidth = windowWidth;
//document.write("page width is : " + pageWidth + " ");
} else {
pageWidth = xScroll;
//document.write("page width is : " + pageWidth + " ");
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
// set object div id is "AutoDiv" size, full of window
function fnAutoDiv() {
var oDiv = document.getElementById("AutoDiv");
if (!oDiv) return;
var height = getPageSize()[3] - 2;
if (oDiv.addEventListener) {
oDiv.setAttribute("style", "height:"+height+"px");
} else {
oDiv.style.height = height;
}
}
// a method of AddEvent for all Brower
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType,fnHandler,false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
}
// add event to window's onload
addEventHandler(window, "load", fnAutoDiv);
addEventHandler(window, "resize", fnAutoDiv);
将以上写到 AutoSize.js 内。
参考 getPageSize() 方法,获取窗口大小后设置 div 大小。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=http://www.w3.org/1999/xhtml lang="gb2312">
<meta http-equiv="Content-Language" content="gb2312" />
<head>
<title>自适应大小</title>
<style>
body { margin:0px; padding:0px }
.clsAutoDiv { overflow:auto; word-wrap:break-word; white-space:normal; text-align:center; border: solid 1px lightblue}
</style>
<script src="AutoSize.js" type="text/javascript"></script>
</head>
<body>
<div id="AutoDiv" class="clsAutoDiv">test auto</div>
</body>