appendChild一个table到一个div后div高度比table高出了许多，这是为什么

Question

本帖最后由 ljm10 于 2009-08-26 20:33:58 编辑

Answer 1

元素都有padding,marging的啊,你看是哪个元素和你的DIV紧密,就把它的marging设置为0就可以了

Answer 2

应该是margin

Answer 3

var hover = '#000066', normal = '#336699';//color;
var index = 2;//z-index;
var offx = 6;
var offy = 6;Type.registerNamespace("LJM");LJM.MyPanel=function(id, title, width, height, left, top, obj, hfLeft, hfTop, hfIsOpen, isCanClose) 
{
    this.Id = id;
    this.Title = title;
    this.Width = width;
    this.Height = height;
    this.Left = left;
    this.Top = top;    
    
    this.x0 = 0;
    this.y0 = 0;
    this.x1 = 0;
    this.y1 = 0;
    this.moveable = false;
    
    this.obj = $get(obj);
    
    this.hfLeftObj = $get(hfLeft);
    this.hfTopObj = $get(hfTop);
    
    this.IsOpenObj = $get(hfIsOpen);
    
    this.IsCanClose = isCanClose;
    
    this.show();
}LJM.MyPanel.prototype = 
{       
    //开始拖动;
    startDrag: function (e)
    {
        this.getFocus();
        var win = $get(this.Id);
        var header = win.childNodes[0];
        //锁定标题栏;        
        if(header.setCapture)
            header.setCapture();
        else if(window.captureEvents)
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEDOWN);
        //定义对象;
        var sha = win.nextSibling;
        var bg = sha.nextSibling;
        //记录鼠标和层位置;
        this.x0 = e.clientX;
        this.y0 = e.clientY;
        this.x1 = parseInt(win.style.left);
        this.y1 = parseInt(win.style.top);
        //改变风格;
        header.style.backgroundColor = hover;
        win.style.backgroundColor = hover;
        win.style.borderColor = hover;
        var content = header.nextSibling;
        content.style.color = hover;
        sha.style.left = this.x1 + offx;
        sha.style.top = this.y1 + offy;
        bg.style.left = this.x1;
        bg.style.top = this.y1;
        this.moveable = true;
        
        header.style.cursor="default";
    },
    //拖动;
    drag: function(e)
    {
        if (this.moveable)
        {
            var win = $get(this.Id);
            var header = win.childNodes[0];
            var sha = win.nextSibling;
            var bg = sha.nextSibling;
            win.style.left = this.x1 + e.clientX - this.x0;
            win.style.top = this.y1 + e.clientY - this.y0;
            sha.style.left = parseInt(win.style.left) + offx;
            sha.style.top = parseInt(win.style.top) + offy;
            bg.style.left = parseInt(win.style.left);
            bg.style.top = parseInt(win.style.top);            header.style.cursor="move";
        }
    },
     //停止拖动;
    stopDrag: function ()
    {
        if (this.moveable)
        {
            var win = $get(this.Id);
            var header = win.childNodes[0];
            var sha = win.nextSibling;
            var bg = sha.nextSibling;
            var content = header.nextSibling;
            win.style.borderColor = normal;
            win.style.backgroundColor = normal;
            header.style.backgroundColor = normal;
            content.style.color = normal;
            sha.style.left = win.style.left;
            sha.style.top = win.style.top;
            bg.style.left = win.style.left;
            bg.style.top = win.style.top;
            if(header.releaseCapture)
                header.releaseCapture();
               else if(window.captureEvents)
                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            this.moveable = false;            header.style.cursor="default";
            
            this.Left = win.style.left.replace("px","");
            this.Top = win.style.top.replace("px","");
            
            this.saveTopLeft();
        }
    },        
    //获得焦点;
    getFocus: function()
    {
        var win = $get(this.Id);
        index = index + 2;
        var idx = index;
        win.style.zIndex = idx;
        var sha = win.nextSibling;
        var bg = sha.nextSibling;
        sha.style.zIndex = idx - 1;
        bg.style.zIndex = idx - 1;
        
    },        
    //最小化;
    min: function ()
    {
        var win = $get(this.Id);
        var sha = win.nextSibling;
        var bg = sha.nextSibling;
        var header = win.childNodes[0];
        var content = win.childNodes[1];
        var minimize = header.childNodes[2];
        var flg = content.style.display=="none";
        if (flg)
        {
            win.style.height = parseInt(content.style.height) + parseInt(header.style.height) + 2 * 2;
            sha.style.height = parseInt(win.style.height) + 4 + "px";
            bg.style.height = parseInt(win.style.height) + 4 + "px";
            content.style.display = "block";
            minimize.innerHTML = "0";
        }
        else
        {
            win.style.height = parseInt(header.style.height) + 2 * 2;
            sha.style.height = parseInt(win.style.height) + 4 + "px";
            bg.style.height = parseInt(win.style.height) + 4 + "px";
            minimize.innerHTML = "2";
            content.style.display = "none";
        }
    },
    //显示隐藏窗口
    showHide: function (dis)
    {
        var win = $get(this.Id);
        var sha = win.nextSibling;
        var bg = sha.nextSibling;
        var bdisplay = (dis == null)?((win.style.display=="")?"none":""):dis
        win.style.display = bdisplay;
        sha.style.display = bdisplay;  
        bg.style.display = bdisplay;  
        if (bdisplay != "none")
        {
            this.initialize();
        }    },
    hide: function()
    {
        this.showHide("none");
        this.IsOpenObj.value = "false";
        this.obj.style.display = "none";
    },
    show: function()
    {
        try
        {
            this.appendForm();
            this.showHide(null);
            this.IsOpenObj.value = "true";
        }
        catch (e)
        {
            var win = $get(this.Id);
            var sha = win.nextSibling;
            var bg = sha.nextSibling;
            win.style.display = "none";
            sha.style.display = "none";  
            bg.style.display = "none";  
            this.IsOpenObj.value = "false";
            
        }
    },
    //初始化
    initialize: function()
    {
        var win = $get(this.Id);
        //header
        var header = win.childNodes[0];
        header.style.width = this.Width - 6 + "px";
        header.style.height = "20px";
        $clearHandlers(header);
        $addHandlers(header,
        {
            mousedown:this.startDrag,
            mouseup:this.stopDrag,
            mousemove:this.drag,
            dblclick:this.min
        },
        this);    
        //title
        var title = header.childNodes[0];
        title.style.width = this.Width - 36 + "px";
        title.innerText = this.Title;
        //min
        var minimize = header.childNodes[2];
        $clearHandlers(minimize);
        $addHandlers(
        minimize, 
        {
            click:this.min
        },
        this);
        //close
        var close = header.childNodes[4];
        $clearHandlers(close);
        $addHandlers(close, 
        {
            click:this.hide
        },
        this);
        close.disabled = this.IsCanClose;
        //content
        var content = win.childNodes[1];
        if (content.offsetHeight > this.Height)
        {
            content.style.height = this.Height;
            content.style.width = this.Width - 6;
        }
        else
        {
            content.style.height = content.clientHeight + "px";
            content.style.width = this.Width - 6;
        }
        //obj
        var obj = content.childNodes[0];
        obj.style.width = "100%";
        obj.style.height = "100%";
        //win
        win.style.height = parseInt(content.style.height) + parseInt(header.style.height) + 2 * 2;
        win.style.width = this.Width + "px";
        win.style.left = this.Left + "px";
        win.style.top = this.Top + "px";
        win.style.zIndex = index;
        $clearHandlers(win);
        $addHandlers(win,
        {
            click:this.getFocus
        },
        this);
        //sha
        var sha = win.nextSibling;
        sha.id = this.Id + "sha";    
        $("#" + this.Id + "sha").bgIframe();  
        sha.style.width = win.clientWidth + 4;
        sha.style.height = win.clientHeight + 4;
        sha.style.left = this.Left;
        sha.style.top = this.Top;      
        sha.style.zIndex = index - 1;  
        //bg
        var bg = sha.nextSibling;
        bg.id = this.Id + "bg";    
        $("#" + this.Id + "bg").bgIframe();  
        bg.style.width = win.clientWidth + 4;
        bg.style.height = win.clientHeight + 4;
        bg.style.left = this.Left;
        bg.style.top = this.Top;        
        bg.style.zIndex = index - 1;
    },
    
    appendForm:function()
    {
        var win = $get(this.Id);
        var content = win.childNodes[1];
        try
        {
            content.appendChild(this.obj);
        }
        catch (e)
        {
            throw "没有找到记录";
        }
        this.obj.style.display = "block";
    },    
    
    clearContent:function()
    {
        var win = $get(this.Id);
        var content = win.childNodes[1];
        $(content).empty();
    },
    
    saveTopLeft:function()
    {
        this.hfLeftObj.value = this.Left;
        this.hfTopObj.value = this.Top;        
    }
}
LJM.MyPanel.registerClass("LJM.MyPanel");就是将一个容器添加到我定义的div里面，会根据其实容器的高度div自动适应，而超出某一高度时会显示滚动条。我试过有部分不含有太多html控件的容器可以，但含有大量控件的就不行，会比实际容器的高度高很多

Answer 4

未添加到div时容器高度是353，添加后容器高度变成了545。何解呢？

Answer 5

乱弄弄好了，也不知道原因是什么。还未搞懂容器的clientHeight,offsetHeight及scollHeight,style.height的区别，网上说的都是document的，但都没有有关容器这方面的，有人能解答一下吗。