div显示内容问题求教高人们

[code=HTM]
<div style="overflow-y:hidden; height:140px;" id="d_div">
                    <ul></ul>
</div>
[/code]
高度是为了最多可以显示7个而设置的，ul里的li是通过脚本创建的，现在有两个问题：问题1：比如我通过一个按钮点击触发一个function ，里面创建li
  function myfunc(){
     $("#d_div ul").append("<li>这是第1个li</li>");
  }
前面7个都没有问题，到第8个时，第8个不会出现在最下方，我必须通过点击下方的按钮调用另外一个方法才可以显示第8个，把第1个向上挪, 我本意是想让第8个显示在最下方，而这时候第一个就会向上挪动一个li高度(20),怎么做。问题2：假如我不知道从第8个开始往后高度会溢出，我如何判断div的高度是否溢出了，我想当div的高度溢出的时候把下方的按钮设置启用，还有如果溢出了我点击向下的按钮后如何判断div的内容到达底部了。在此先谢谢各位了

解决方案 »

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

第一个问题：把ul的margin-top设为-20px试试。或者设置ul的position为absolute，用top=-20px;z-index小于外面的div。
上下移动的方法是
[code=HTM]
function scroll(index)
  {
      temp=index;      d_div.scrollTop=d_div.scrollTop+temp;
     if(temp==0)
        return;
   }
[/code]
我想应该不关样式的问题吧，主要是我不知道如何判断div是否溢出了和如何获取div溢出的高度，
比如我知道了溢出的高度我就可以模拟一次上面的方法。
DIV自适应高度写法简介
http://developer.51cto.com/art/201008/222403.htm
第二个问题：去掉div的样式overflow:hidden，用js的onresize事件属性判断控制之。
onresize好像只有ie支持，其他浏览器这个只支持浏览器窗体，不支持元素的。你可以参考下面的做法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#div1 {
    width:100px;
    height:4em;
    font-size:12px;
    border:1px solid red;
    overflow:hidden;
}
</style>
<script>
var n=0;
function addContent(Xelement)
{
    Xelement.innerHTML="<span style='display:block;line-height:12px;'>中华
人民共和国宪法是我国的根本大法，是指定其他法律法规的依据。</span>";
    Xelement.childNodes[0].style.marginTop=n--+"em";
}
</script>
</head>
<body>
<div id="div1" onclick="addContent(this)"></div>
</body>
</html>
连续单击div，可以看到效果。原理是差不多的。
[code=JScrip]
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var first = 1;
        var last = 7;
        $(function () {            CreateLi(first, last);
            $("#btnUp").click(function () {
                if (first > 1) {
                    first--; last--;
                    CreateLi(first, last);
                }
            });            $("#btnDown").click(function () {
                last++;
                first++;
                CreateLi(first, last);
            });
        });        function CreateLi(first, last) {
            var ul = $("#show ul");
            ul.children().remove();
            for (var i = first; i <= last; i++) {
                ul.append("<li>"+i+"</li>");
            }
        }
    </script>
[/code]
[code=HTM]
<input type="button" id="btnUp" value="UP" />    <div id="show">
                <ul></ul>
    </div>    <input type="button" id="btnDown" value="DOWN" />
[/code]
[code=HTM]<!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 id="Head1" runat="server">
  <title></title>
  <script src="jquery-1.5.min.js"></script>
  <script>
    var i = 0;
    function myfunc() {
      $("#d_div ul").append("<li>这是第" + (i++) + "个li</li>");
      $("#d_div").scrollTop = $("#d_div").scrollHeight;
      document.getElementById("d_div").scrollTop = document.getElementById("d_div").scrollHeight
      if(document.getElementById("d_div").scrollTop>0) alert("溢出了。")
    }  </script>
  <style>
  li{border-bottom:1px solid blue}
  </style>
</head>
<body>
  <div style="overflow-y: hidden; height: 140px;border:1px solid red" id="d_div">
    <ul>
    </ul>
  </div>
  <input onclick="myfunc()" />
</body>
</html>[/code]
其实楼主只要判断下ul里li的个数，乘以li的高度，同div的高度比较下，就知道是否溢出了。