单独设置界面中特定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. IntelliJ IDEA 的 Java 热部署插件 JRebel 安装及使用

    JRebel 介绍 JRebel for Intellij JRebel 在 Java Web 开发中, 一般更新了 Java 文件后要手动重启 Tomcat 服务器, 才能生效,  自从有了 JRe ...

  2. Python模块 (xlsxwriter)

    xlsxwriter是python中用来处理execl表格的库 参考

  3. 关于StdAfx.h和StdAfx.cpp

    http://www.cplusplus.com/articles/2z86b7Xj/ https://msdn.microsoft.com/en-us/library/h552b3ca.aspx h ...

  4. @propetry参数

    // //  Person.h //  01-手动内存管理基本概念 // //  Created by apple on 14-3-17. // // #import <Foundation/F ...

  5. UICollection 重排 和汉字拼音

    http://nshint.io/blog/2015/07/16/uicollectionviews-now-have-easy-reordering/ NSMutableString *str = ...

  6. IIS 相关

    Restart IIS: run "iisreset" command check port usage: netstat -ano How to set up SSL in II ...

  7. 误卸载python2.4导致yum不能用后的修复

    去 http://mirrors.ustc.edu.cn/centos/或者镜像下载如下包,版本不一定非常一致 python-2.4.3-56.el5.x86_64.rpmpython-devel-2 ...

  8. TOMCAT 关闭报错：Tomcat did not stop in time. PID file was not removed

    关闭tomcat的时候,报出如下错误信息: # ./shutdown.sh Using CATALINA_BASE: /opt/openkm-6.3.1-community/tomcat Using ...

  9. Java基础之集合框架——使用真的的链表LinkedList<>（TryPolyLine）

    控制台程序. public class Point { // Create a point from its coordinates public Point(double xVal, double ...

  10. PostgreSQL 中日期类型转换与变量使用及相关问题

    PostgreSQL中日期类型与字符串类型的转换方法 示例如下: postgres=# select current_date; date ------------ 2015-08-31 (1 row ...