使用jquery,在点击的收缩时候向下收缩,然后第一个global_module高度加上收缩的高度,使之铺满整个窗口。
<div id="leftTree">
<div class="global_module">
<h3>对象显示区</h3>
<div>
</div>
</div>
<div class="global_module">
<h3>快速查找<a href="#">高级查询</a></h3>
<div>
<div>
<table>
<tr>
<td><a href="#" target="_blank">地址</a></td>
<td><input id="devAddr" size="8"/></td>
<td><a href="#" onclick="query(0)" class="jqModal">查询</a></td>
</tr>
<tr>
<td>名称</td>
<td><input id="cpName" size="8"/></td>
<td><a href="#" onclick="query(1)" class="jqModal">查询</a></td>
</tr>
</table>
</div>
<div class="jqmWindow" id="query_table">
</div>
</div>
<p class="module_up_down">
<img alt="收缩" src="images/select.jpg"/>
</p>
</div>
<div class="global_module">
<h3>统计信息<a href="#">详细</a></h3>
<div>
文字部分<br/>
文字部分<br/>
文字部分<br/>
</div>
<p class="module_up_down">
<img alt="收缩" src="images/select.jpg"/>
</p>
</div>
</div>

解决方案 »

  1.   

    ???用那么多 没用的  div  标签干嘛???
      

  2.   


    <!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>
    <script src="jquery-1.3.2.js"></script>
    <script>
    $(document).ready(function(){
       $("img").toggle(function(){
    $(this).parent().prev().hide();
    },function(){
    $(this).parent().prev().show();
    });
    });
    </script></head><body>
    <div id="leftTree">
        <div class="global_module">
            <h3>对象显示区</h3>
            <div>
            </div>
        </div>
        <div class="global_module">
            <h3>快速查找<a href="#">高级查询</a></h3>    
            <div>
                <div>
                    <table>
                        <tr>
                            <td><a href="#" target="_blank">地址</a></td>
                            <td><input id="devAddr" size="8"/></td>
                            <td><a href="#" onclick="query(0)" class="jqModal">查询</a></td>
                        </tr>
                        <tr>
                            <td>名称</td>
                            <td><input id="cpName" size="8"/></td>
                            <td><a href="#" onclick="query(1)" class="jqModal">查询</a></td>
                        </tr>
                    </table>                
                </div>
                <div class="jqmWindow" id="query_table">
                </div>
            </div>
            <p class="module_up_down">
                <img alt="收缩" src="1.png"/>
            </p>
        </div>
        <div class="global_module">
            <h3>统计信息<a href="#">详细</a></h3>
            <div>
                文字部分<br/>
                文字部分<br/>
                文字部分<br/>
            </div>
            <p class="module_up_down">
                <img alt="收缩" src="1.png"/>
            </p>
        </div>                
    </div>
    </body>
    </html>
    是这种吗
      

  3.   

    回复2楼,没用的标签实际上是有用的,程序会操作相关div。
    回复3楼,很感谢你的帮忙,这个效果我实际上已经实现。只是希望下面两个.global_module底部靠齐,收缩的时候收缩到底部,而不是向上收缩,收缩的同时第一个.global_module的高度改变,填充到下面两个global_module减小的空间。
      

  4.   

    谢谢各位,我使用http://layout.jquery-dev.net/documentation.cfm#Auto-Generated_IDs这个插件来搞定相关问题吧