单独设置界面中特定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. Java 静态类 static

    静态的方法是非虚方法(Java中的非虚方法有private,final,static,构造器,非虚方法无需根据具体的对象遍历方法区的方法表,决定调用关系) 也就是说,对于静态类型方法的调用,是其声明类 ...

  2. hbase基本操作

    public class Demo { private Configuration conf; private Connection conn; @Before public void prepare ...

  3. Java多线程实现

    1.继承Thread类,由于Java单继承特性,此方法并不推荐. 2.实现Runnable接口,代码如下 class MyThread implements Runnable { private St ...

  4. 如何让CRectTracker的m_rect不超出一定的范围，比如screen或者某个document的范围

    最近在尝试做一个QQ截图那样的工具,其中一个功能就是要做一个选择框,自然用到了CRectTracker 但是有一个很关键的东西就是,拖拽CRectTracker的时候,不能让CRectTracker“ ...

  5. pip是用国内镜像源

    pipy国内镜像目前有: http://pypi.douban.com/  豆瓣 http://pypi.hustunique.com/  华中理工大学 http://pypi.sdutlinux.o ...

  6. 使用dbms_system追踪其它session

    dbms_system是内部包,建议在官方指导下使用该包. SQL> desc dbms_system PROCEDURE ADD_PARAMETER_VALUE Argument Name T ...

  7. Java内存分配全面浅析

    本文将由浅入深详细介绍Java内存分配的原理,以帮助新手更轻松的学习Java.这类文章网上有很多,但大多比较零碎.本文从认知过程角度出发,将带给读者一个系统的介绍. 进入正题前首先要知道的是Java程 ...

  8. pg_rewind 介绍

    pg_rewind—使一个PostgreSQL数据目录与另一个数据目录(该目录从第一个PostgreSQL数据目录创建而来)一致. 描述 pg_rewind是一个在集群的时间线参数偏离之后,用于使一个 ...

  9. 【Origin】答友朋关切书

    发烧感冒脑袋疼, 剃了短毛不威风: 莫再问我有何事, 躺下一觉到天明. --作于二零一五年七月二十七日

  10. HDU 4898 The Revenge of the Princess’ Knight（后缀数组+二分+暴力）（2014 Multi-University Training Contest 4）

    Problem Description There is an old country and the king fell in love with a devil. The devil always ...