单独设置界面中特定region区时，高度自适应失败；设置整个界面时成功。实现代码在script块中，具体代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="add_material.aspx.cs" Inherits="Truelore.Fare.Web.add_material" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"/>

    <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"/>

    <link rel="stylesheet" type="text/css" href="css/default.css"/>

    <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>

    <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>

    <style type="text/css">

        body{

            position: relative;

            left: %;

            width: %;

        }

        .line {

            height:32px;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $('#_content').layout();

            setHeight();

        });

        function setHeight() {

            var c = $('#_content');

            var p = c.layout('panel', 'center');    // get the center panel

            var oldHeight = p.panel('panel').outerHeight();

            p.panel('resize', { height: 'auto' });

            var newHeight = p.panel('panel').outerHeight();

            c.layout('resize', {

                height: (c.height() + newHeight - oldHeight)

            });

        }

    </script>

</head>

<body>

    <div id="_content" class = "easyui-panel">

        <div style="height:240px">

            <div class="easyui-layout" data-options="fit:true">

                <div data-options="region:'west'" style="width:60%">

                    <div class = "easyui-panel  bottom-border" style="width:100%">

                        <div style="float:left;width:30%;">

                            <div  class = "easyui-panel line none-border" style="text-align:center;">

                                <span>材料编码:</span>

                            </div>

                        </div>

                        <div style="float:left;width:70%">

                            <div  class = "easyui-panel line left-border" data-options="fit:true" >

                                <span>(自动生成)</span>

                            </div>

                        </div>

                    </div>

                    <div class = "easyui-panel  bottom-border" style="width:100%">

                        <div style="float:left;width:30%;text-align:center">

                            <div  class = "easyui-panel line none-border" style="text-align:center;">

                                <span>材料名称:</span>

                            </div>

                        </div>

                        <div style="float:left;width:70%">

                            <div  class = "easyui-panel line left-border" data-options="fit:true">

                                <input class="easyui-textbox"  style="width:75%;" value ="xxxxx"/>

                            </div>

                        </div>

                    </div>

                    <div class = "easyui-panel  bottom-border" style="width:100%" >

                        <div style="float:left;width:30%;text-align:center">

                            <div  class = "easyui-panel line none-border" style="text-align:center;">

                                <span>规格型号:</span>

                            </div>

                        </div>

                        <div style="float:left;width:70%">

                            <div  class = "easyui-panel line left-border" data-options="fit:true">

                                <input class="textbox easyui-textbox" style="width:75%;" value ="xx"/>

                            </div>

                        </div>

                    </div>

                    <div class = "easyui-panel  bottom-border" style="width:100%">

                        <div style="float:left;width:30%;text-align:center">

                            <div  class = "easyui-panel line none-border" style="text-align:center;">

                                <span>单位:</span>

                            </div>

                        </div>

                        <div style="float:left;width:70%">

                            <div  class = "easyui-panel line left-border" data-options="fit:true" >

                                <input class="easyui-textbox" style="width:75%" value ="m"/>

                            </div>

                        </div>

                    </div>

                    <div class = "easyui-panel  bottom-border" style="width:100%">

                        <div style="float:left;width:30%;text-align:center">

                            <div  class = "easyui-panel line none-border" style="text-align:center;">

                                <span>预算价:</span>

                            </div>

                        </div>

                        <div style="float:left;width:70%">

                            <div  class = "easyui-panel line left-border" data-options="fit:true" >

                                <input class="easyui-textbox" style="width:75%" value =""/>

                            </div>

                        </div>

                    </div>

                    <div class = "easyui-panel  bottom-border" style="width:100%">

                        <div style="float:left;width:30%;text-align:center">

                            <div  class = "easyui-panel line none-border" style="text-align:center;">

                                <span>市场价:</span>

                            </div>

                        </div>

                        <div style="float:left;width:70%">

                            <div  class = "easyui-panel line left-border" data-options="fit:true" >

                                <input class="easyui-textbox none-border" style="width:75%" value =""/>

                            </div>

                        </div>

                    </div>

                    <div class = "easyui-panel  bottom-border" style="width:100%">

                        <div style="float:left;width:30%;text-align:center">

                            <div  class = "easyui-panel line none-border" style="text-align:center;">

                                <span>归属章节:</span>

                            </div>

                        </div>

                        <div style="float:left;width:70%">

                            <div  class = "easyui-panel line left-border" data-options="fit:true" style="text-align:center">

                                <a href='#' class='easyui-linkbutton' style="margin:2px 15px" >选择</a>

                                <a href='#' class='easyui-linkbutton' style="margin:2px 15px" >新建</a>

                            </div>

                        </div>

                    </div>

                </div>

                <div data-options="region:'east'" style="width:40%">

                    <div class="easyui-panel none-border" style="padding:5px;" >

                        <ul class="easyui-tree" data-options="url:'jsons/add_material_tree.json',method:'get',animate:true" style="border:none"></ul>

                    </div>

                </div>

            </div>

        </div>

        <div class = "easyui-panel line none-border" >

            <a href='#' class='easyui-linkbutton' style="margin:2px" >导入Excel</a>

        </div>

         <div style="height:100%;">

            <div data-options="region:'center'">

                    <table id = "_dg_json" class="easyui-datagrid none-border" data-options="rownumbers:true,singleSelect:true,collapsible:true,url:'jsons/add_material_datagrid.json',method:'get'" >

                        <thead>

                            <tr>

                                <th data-options="field:'code',width:'20%',align:'center'">材料编码</th>

                                <th data-options="field:'name',width:'20%',align:'center'">材料名称</th>

                                <th data-options="field:'type',width:'8%',align:'center'">规格型号</th>

                                <th data-options="field:'uinit',width:'8%',align:'center'">单位</th>

                                <th data-options="field:'budgetary_price',width:'20%',align:'center'">预算价</th>

                                <th data-options="field:'market_price',width:'20%',align:'center'">市场价</th>

                            </tr>

                        </thead>

                    </table>

            </div>

            <div data-options="region:'south'" style="height:50px;">

                <div style ="width:100%;text-align:center">

                    <a href='#' class='easyui-linkbutton' style="margin:10px 25px" >保存</a>

                    <a href='#' class='easyui-linkbutton' style="margin:10px 25px" >取消</a>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

easyui设置界面的高度自适应的更多相关文章

  1. EasyUI combobox 下拉高度自适应

    要指出的是,combobox是继承自combo的,所以,combo的属性也可以被combobox使用,该问题也是这样产生的,知道这个原理,该问题就解决一半了,另一点要指出的是,在easyui中,num ...

  2. 如何使easyui的datagrid 高度自适应

    如何使easyui的datagrid 高度自适应? 最开始使用easyui的datagrid加载数据时,对其设置的高度都是固定值,数据较多时table表现为滚动条形式.某天,老大突然需要datagri ...

  3. WPF设置DataGrid行内容高度自适应 与 TextBox/TextBlock内容高度自适应

    WPF设置DataGrid行内容高度自适应  TextBox/TextBlock内容高度自适应  参考: DataGrid 控件中的调整大小选项: http://msdn.microsoft.com/ ...

  4. 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  5. android设置GridView高度自适应，实现全屏铺满效果

    使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gr ...

  6. 关于UIWebView设置高度自适应的问题

    - (void)viewDidLoad { [super viewDidLoad]; _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMa ...

  7. 如何设置iframe高度自适应，在跨域的情况下能做到吗？

    在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法.在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载. ...

  8. [Asp.Net Core] - 设置 Syncfusion / RichTextEditor 移除超链接及高度自适应 的方法

    背景 使用 Syncfusion / RichTextEditor 对录入后的信息进行展示:1. 希望内容高度自适应.2. 希望禁用原文中的超链接.   实现 <div class=" ...

  9. css高度自适应

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

随机推荐

  1. MFC和Direct3D9一起使用

    第一步:新建MFC单文档项目,向导如下: 第二步:添加引用,在项目属性的VC++目录中修改Include和lib文件夹. 第三步:在stdafx.h文件Include部分的最后添加如下引用. #inc ...

  2. 清除mstsc远程登录记录

    这里提供一串清除mstsc远程登录记录的命令 @echo off set TMP1=%cd%echo %TMP1%reg delete "HKEY_CURRENT_USER\Software ...

  3. 参数db_ultra_safe

    db_ultra_safe参数设置控制保护级别的其它参数的默认值 可以取的值有:off.data_only.data_and_index.默认值是off -off:不影响db_block_checki ...

  4. duplicate database的时候，rman连接 auxiliary database的后状态不正确

    duplicate database的时候,rman连接 auxiliary database的后状态不正确 auxiliary database 已经被startup nomount,但是rman连 ...

  5. 使用RMAN对控制文件进行restore

    控制文件的默认备份格式是: c-IIIIIIIIII-YYYYMMDD-QQ 其中: c:表示控制文件 IIIIIIIIII:表示DBID YYYYMMDD:备份的时间戳 QQ:16进制的序列号,从0 ...

  6. Python：使用pymssql批量插入csv文件到数据库测试

    并行进程怎么使用? import os import sys import time def processFunc(i): time.sleep(10-i) print i if __name__= ...

  7. Nodejs解决2分钟限制

    摘要:解决:在nodejs中调用服务,若超过2分钟服务没有返回数据,node会再次请求服务.  加班的日子总算暂时结束了,才发现下午6点钟的天还没有黑!开始我的总结吧... 去年的某个项目用nodej ...

  8. Redis Sets

    Sets Sets 就是一个集合,集合的概念就是一堆不重复值的组合.利用Redis提供的Sets数据结构,可以存储一些集合性的数据,比如在微博应用中,可以将一个用户所有的关注人存在一个集合中,将其所有 ...

  9. G面经prepare: set difference

    给你A{1,2,3,4,4,5}, B{2,4},求A-B={1,3,4,5},很简单. visit 1 只用一个HashMap package TwoSets; import java.util.* ...

  10. application 统计网站访问人数

    参考书<JSP Web 开发案例教程> index.jsp welcome.jsp 显示