js如何控制div随真实高度增加而增加

table的td里放一个div，一开始设定DIV的高度，隐藏多余的标签，点击更多的时候，把其他的标签也显示出来。
点击标签会增加标签。
想实现的效果是，然后div随着标签的增加，高度也增加，可是代码只在ie6下测试成功，ie7/8/9和chrome下都失败。
求高手指导啊。。<!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>
    <style type="text/css">
        span
        {
            height: 20px;
            width: 50px;
        }
        .cont
        {
            border:1px solid gray;
            height:40px;
            overflow:hidden;
        }
        .more
        {
            border:1px solid #666;
            }
    </style>
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".more").live("click", function () {
                $(".cont").css("overflow", "visible");
                alert($(".cont").height());
                alert($(".cont").outerHeight());
                $(".cont").height($(".cont").outerHeight());
            })            $("span").live("click", function () {
                var newobj = $(this).clone();
                $(".cont").append(newobj);
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td style="width: 105px">
                <div class="cont">
                    <span><input type="checkbox" />aaa</span>
                    <span><input type="checkbox" />bbb</span>
                    <span><input type="checkbox" />ccc</span>
                    <span><input type="checkbox" />ddd</span>
                    <span><input type="checkbox" />eee</span>
                    <span><input type="checkbox" />fff</span>
                </div>
                <div class="more">
                    更多
                </div>
            </td>
        </tr>
    </table>
</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>
    <style type="text/css">
        span
        {
            height: 20px;
            width: 50px;
        }
        .cont
        {
            border:1px solid gray;
            _height:40px;
min-height:40px;
            overflow:hidden;
        }
        .more
        {
            border:1px solid #666;
            }
    </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".more").live("click", function () {
                $(".cont").css("overflow", "visible");
                alert($(".cont").height());
                alert($(".cont").outerHeight());
                $(".cont").height($(".cont").outerHeight());
            })            $("span").live("click", function () {
                var newobj = $(this).clone();
                $(".cont").append(newobj);
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td style="width: 105px">
                <div class="cont">
                    <span><input type="checkbox" />aaa</span>
                    <span><input type="checkbox" />bbb</span>
                    <span><input type="checkbox" />ccc</span>
                    <span><input type="checkbox" />ddd</span>
                    <span><input type="checkbox" />eee</span>
                    <span><input type="checkbox" />fff</span>
                </div>
                <div class="more">
                    更多
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
$(".cont").css("overflow", "auto");而且不要放在click里面，试一下
可能错了。overflow默认auto属性。试试不定义cont的高度，内容增加时应该会被自动撑大
_height:40px;
是什么意思呢，你这个不能隐藏多余的啊
是啊，Overflow默认是auto，比如div全部显示出来的高度是100px，现在想隐藏到只剩下40px，只能设为hidden啊，不然没效果
<!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>
    <style type="text/css">
        span
        {
            height: 20px;
            width: 50px;
        }
        .cont
        {
            border:1px solid gray;
            _height:40px;
            min-height:40px;
            overflow:hidden;
        }
        .more
        {
            border:1px solid #666;
            }
    </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".more").live("click", function () {
                $(".cont").css("overflow", "visible");
                $(".cont").css("height", "auto");
                alert($(".cont").height());
                alert($(".cont").outerHeight());
                $(".cont").height($(".cont").outerHeight());
            })            $("span").live("click", function () {
                var newobj = $(this).clone();
                $(".cont").append(newobj);
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td style="width: 105px">
                <div class="cont">
                    <span><input type="checkbox" />aaa</span>
                    <span><input type="checkbox" />bbb</span>
                    <span><input type="checkbox" />ccc</span>
                    <span><input type="checkbox" />ddd</span>
                    <span><input type="checkbox" />eee</span>
                    <span><input type="checkbox" />fff</span>
                </div>
                <div class="more">
                    更多
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
不知道这样是不是你想要的
太假了，竟然是高度没设为auto的问题，坑爹啊，这个我记得之前写过也不行。
兄弟，太谢谢啦，就给你了
<!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>
    <style type="text/css">
        span
        {
            height: 20px;
            width: 50px;
        }
        .cont
        {
            border:1px solid gray;
            height:40px;
            overflow:hidden;
        }
        .more
        {
            border:1px solid #666;
            }
    </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".more").live("click", function () {
                $(".cont").css("height", "auto");
                //alert($(".cont").height());
                //alert($(".cont").outerHeight());
alert($('.cont').height())
                $(".cont").height($('.cont').height());
            })            $("span").live("click", function () {
                var newobj = $(this).clone();
$(".cont").css("height", "auto");
                $(".cont").append(newobj);
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td style="width: 105px">
                <div class="cont">
                    <span><input type="checkbox" />aaa</span>
                    <span><input type="checkbox" />bbb</span>
                    <span><input type="checkbox" />ccc</span>
                    <span><input type="checkbox" />ddd</span>
                    <span><input type="checkbox" />eee</span>
                    <span><input type="checkbox" />fff</span>
                </div>
                <div class="more">
                    更多
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
楼主试试。