单独设置界面中特定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. system执行shell命令

    system - execute a shell command #include <stdlib.h> int system (const char *command); 描述 syst ...

  2. OSG第一个Demo

    环境:Vs2010 OpenSceneGraph-3.0.1-VS10.0.30319-x86-debug-12741 OpenSceneGraph-3.0.1-VS10.0.30319-x86-re ...

  3. RPC、SQL、NFS属于OSI的哪一层

    第一层:物理层 第二层:数据链路层 802.2.802.3ATM.HDLC.FRAME RELAY 第三层:网络层 IP.IPX.ARP.APPLETALK.ICMP 第四层:传输层 TCP.UDP. ...

  4. 【转】DataSource高级应用

    我们知道 DataSource能提供最高性能的对数据库的并发访问,但是,对DataSource的引用,也还有很多知识要弄清楚,获取Connection的方式是数据库性能最相关的技术,而对DataSou ...

  5. [原创]java WEB学习笔记49：文件上传基础，基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  6. Python学习总结4：字符串常量与操作汇总

    参考博客:http://www.cnblogs.com/Camilo/archive/2013/09/21/3332267.html http://www.cnblogs.com/SunWentao/ ...

  7. TF255466: Team Foundation Server 的配置过程无法继续。以前的更新或安装需要重

    在验证是否可以安装 SharePoint 时的提示,Error [ System Checks ] TF255466: The configuration process for Team Found ...

  8. Spring容器中的Bean

    一,配置合作者的Bean Bean设置的属性值是容器中的另一个Bean实力,使用<ref.../>元素,可制定一个bean属性,该属性用于指定容器中其他Bean实例的id属性 <be ...

  9. 夺命雷公狗---node.js---8url模块和util模块

    我们先到手册上看看: 上面很明显就写着返回一个对象. 再来看看util模块, 废话不哦多说,先上一点代码: /** * Created by leigood on 2016/8/13. */ var ...

  10. [Ubuntu] ubuntu13.04 从php5.4降级到php5.3

    ubuntu12.10以后,默认的deb安装库上面的php版本已经是5.4了,公司的项目使用5.4的时候,还是会出现很多问题,所以不得不降级安装5.3 顺便说一句,我原来的环境是nginx + php ...