XHTML学习笔记(3)之自适应高度js

来源：互联网发布：智慧记for mac 编辑：程序博客网时间：2024/06/04 20:40

通过 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>