DIV高度自适应实现

时间: 2010-4-26 - 分类: JavaScript - 评论: 0 - 阅读: 1,610 次

项目中用到了google地图，需要地图显示的区域会自动扩展到最大，宽度的自适应是很容易的，width 100%就可以搞定，但是高度试过了几种方法都不满意，浏览器兼容性很难做，很麻烦。最后觉得还是用Javascript来实现最好。范例的代码如下：

 HXMap.util =
{
    autoResize: function(){
        var MINHEIGHT = 450; //浏览器允许的最小高度
        var TOPHEIGHT = 100;
        var viewHeight = HXMap.util.getWindowHeight();
        if (viewHeight < MINHEIGHT) {
            viewHeight = MINHEIGHT;
        }
        var contentHeight = viewHeight - TOPHEIGHT;
        $('#map').height(contentHeight);
        $('#searchReasultList').height(contentHeight - 119);
    },
    getWindowHeight: function(){
        return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }
}

说起来也很简单，就是先获得当前浏览器窗口的可视高度，兼容性考虑到大部分浏览器了，然后扣除掉顶部的高度，结合jquery 使用设置下所需要设置高度的div。

最后这样调用：

HXMap.util.autoResize();
 $(window).resize(function(){
 HXMap.util.autoResize();
 });

这样调用的效果就是在初始载入的时候调高度整一次，每次窗口大小改变的时候自动调整div高度。最后的效果如：

http://www.hxfang.com/action-channel-name-map.html

发表评论