继续发帖,div滚动条的问题

我用下面的代码,实现了滚动条在最下面,但是当不是输入文字,而是插入图片的时候,问题出现了,div的纵向滚动条消失了.
而且也不显示最后的内容,请问我应该如何修改这段代码.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>new document</title>
    <style type="text/css">
    html, body{
        margin:0; padding:0; font-size:12px;
    }
    #msg{
        border:1px solid #006699; overflow:scroll;
        width:500px; height:100px;
    }
    #msg div{
        line-height:20px;
    }
    </style>
    <script type="text/javascript">
    window.onload = function(){
        var msg = document.getElementById("msg");
        var autoScroll = true, height = msg.offsetHeight, lh = 20;
        (function(){
            autoScroll = (msg.scrollHeight - msg.scrollTop - height + lh) < 5 ? true : false;
            msg.innerHTML += "<div>" + new Date().toLocaleString() + "</div>";
            if(autoScroll){
                msg.scrollTop = msg.scrollHeight - height + lh;
            }
            setTimeout(arguments.callee, 1000);
        })();
    };
    </script>
</head>
<body>
<div id="msg"></div>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    html, body{
        margin:0; padding:0; font-size:12px;
    }
    #msg{
        border:1px solid #006699; overflow:scroll;
        width:500px; height:100px;
    }
    #msg div{
        line-height:20px;
    }
</style>
<script type="text/javascript">
    window.onload = function(){
        var msg = document.getElementById("msg");
        var autoScroll = true, height = msg.offsetHeight, lh = 20;
        (function(){
            autoScroll = (msg.scrollHeight - msg.scrollTop - height + lh) < 5 ? true : false;
            //msg.innerHTML += "<div>" + new Date().toLocaleString() + "</div>";
msg.innerHTML += "<div><img src='images/1.png' /></div>";
            if(autoScroll){
                msg.scrollTop = msg.scrollHeight - height + lh;
            }
            setTimeout(arguments.callee, 1000);
        })();
    };
</script>
</head><body>
<div id="msg"></div>
</body>
</html>
不是啊，在我这里ie6和ff下都是正常的楼主
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    html, body{
        margin:0; padding:0; font-size:12px;
    }
    #msg{
        border:1px solid #006699; overflow:scroll;
        width:500px; height:100px;
    }
    #msg div{
        line-height:20px;
    }
.test{
word-break:break-all;
}
</style>
<script type="text/javascript">
    window.onload = function(){
        var msg = document.getElementById("msg");
        var autoScroll = true, height = msg.offsetHeight, lh = 20;
        (function(){
            autoScroll = (msg.scrollHeight - msg.scrollTop - height + lh) < 5 ? true : false;
            //msg.innerHTML += "<div>" + new Date().toLocaleString() + "</div>";
msg.innerHTML += "<div class='test'><img src='images/1.png' /><img src='images/1.png' /><img src='images/1.png' /><img src='images/1.png' /><img src='images/1.png' /><img src='images/1.png' /><img src='images/1.png' /><img src='images/1.png' /></div>";
            if(autoScroll){
                msg.scrollTop = msg.scrollHeight - height + lh;
            }
            setTimeout(arguments.callee, 1000);
        })();
    };
</script>
</head><body>
<div id="msg"></div>
</body>
</html>
文字也是一样的
#msg{
        border:1px solid #006699; overflow:scroll;
        width:500px; height:100px;
    }改为width:100%; height:100%;
就不好用了
改为width:100%; height:100%;？
为什么要改成这样，那你在整个页面里这样的话，肯定不好使，如果你是整个页面就不要用标签来表示了，如果是百分比的话，那么滚动条是不会出来的，因为整个页面也没有固定大小，它可以无限大，楼主你要做什么为什么会这样做？
是这样的.我这个是聊天的页面.div是存储聊天的内容的.下面有输入框输入内容.
如果div是固定高度,那么对于不同尺寸的显示器来说,页面显示就会有空白,或者有的就显示不全了.
弄好了.在js里将div的高度控制了