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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="add_material.aspx.cs" Inherits="Truelore.Fare.Web.add_material" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title></title>
  9.     <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css"/>
  10.     <link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css"/>
  11.     <link rel="stylesheet" type="text/css" href="css/default.css"/>
  12.     <script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
  13.     <script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
  14.  
  15.     <style type="text/css">
  16.  
  17.         body{
  18.             position: relative;
  19.             left: %;
  20.             width: %;
  21.         }
  22.  
  23.         .line {
  24.             height:32px;
  25.         }
  26.  
  27.     </style>
  28.  
  29.     <script type="text/javascript">
  30.         $(function () {
  31.             $('#_content').layout();
  32.             setHeight();
  33.         });
  34.         function setHeight() {
  35.             var c = $('#_content');
  36.             var p = c.layout('panel', 'center');    // get the center panel
  37.             var oldHeight = p.panel('panel').outerHeight();
  38.             p.panel('resize', { height: 'auto' });
  39.             var newHeight = p.panel('panel').outerHeight();
  40.             c.layout('resize', {
  41.                 height: (c.height() + newHeight - oldHeight)
  42.             });
  43.         }
  44.     </script>
  45.  
  46. </head>
  47. <body>
  48.     <div id="_content" class = "easyui-panel">
  49.         <div style="height:240px">
  50.             <div class="easyui-layout" data-options="fit:true">
  51.                 <div data-options="region:'west'" style="width:60%">
  52.                     <div class = "easyui-panel  bottom-border" style="width:100%">
  53.                         <div style="float:left;width:30%;">
  54.                             <div  class = "easyui-panel line none-border" style="text-align:center;">
  55.                                 <span>材料编码:</span>
  56.                             </div>
  57.                         </div>
  58.                         <div style="float:left;width:70%">
  59.                             <div  class = "easyui-panel line left-border" data-options="fit:true" >
  60.                                 <span>(自动生成)</span>
  61.                             </div>
  62.                         </div>
  63.                     </div>
  64.                     <div class = "easyui-panel  bottom-border" style="width:100%">
  65.                         <div style="float:left;width:30%;text-align:center">
  66.                             <div  class = "easyui-panel line none-border" style="text-align:center;">
  67.                                 <span>材料名称:</span>
  68.                             </div>
  69.                         </div>
  70.                         <div style="float:left;width:70%">
  71.                             <div  class = "easyui-panel line left-border" data-options="fit:true">
  72.                                 <input class="easyui-textbox"  style="width:75%;" value ="xxxxx"/>
  73.                             </div>
  74.                         </div>
  75.                     </div>
  76.                     <div class = "easyui-panel  bottom-border" style="width:100%" >
  77.                         <div style="float:left;width:30%;text-align:center">
  78.                             <div  class = "easyui-panel line none-border" style="text-align:center;">
  79.                                 <span>规格型号:</span>
  80.                             </div>
  81.                         </div>
  82.                         <div style="float:left;width:70%">
  83.                             <div  class = "easyui-panel line left-border" data-options="fit:true">
  84.                                 <input class="textbox easyui-textbox" style="width:75%;" value ="xx"/>
  85.                             </div>
  86.                         </div>
  87.                     </div>
  88.                     <div class = "easyui-panel  bottom-border" style="width:100%">
  89.                         <div style="float:left;width:30%;text-align:center">
  90.                             <div  class = "easyui-panel line none-border" style="text-align:center;">
  91.                                 <span>单位:</span>
  92.                             </div>
  93.                         </div>
  94.                         <div style="float:left;width:70%">
  95.                             <div  class = "easyui-panel line left-border" data-options="fit:true" >
  96.                                 <input class="easyui-textbox" style="width:75%" value ="m"/>
  97.                             </div>
  98.                         </div>
  99.                     </div>
  100.                     <div class = "easyui-panel  bottom-border" style="width:100%">
  101.                         <div style="float:left;width:30%;text-align:center">
  102.                             <div  class = "easyui-panel line none-border" style="text-align:center;">
  103.                                 <span>预算价:</span>
  104.                             </div>
  105.                         </div>
  106.                         <div style="float:left;width:70%">
  107.                             <div  class = "easyui-panel line left-border" data-options="fit:true" >
  108.                                 <input class="easyui-textbox" style="width:75%" value =""/>
  109.                             </div>
  110.                         </div>
  111.                     </div>
  112.                     <div class = "easyui-panel  bottom-border" style="width:100%">
  113.                         <div style="float:left;width:30%;text-align:center">
  114.                             <div  class = "easyui-panel line none-border" style="text-align:center;">
  115.                                 <span>市场价:</span>
  116.                             </div>
  117.                         </div>
  118.                         <div style="float:left;width:70%">
  119.                             <div  class = "easyui-panel line left-border" data-options="fit:true" >
  120.                                 <input class="easyui-textbox none-border" style="width:75%" value =""/>
  121.                             </div>
  122.                         </div>
  123.                     </div>
  124.                     <div class = "easyui-panel  bottom-border" style="width:100%">
  125.                         <div style="float:left;width:30%;text-align:center">
  126.                             <div  class = "easyui-panel line none-border" style="text-align:center;">
  127.                                 <span>归属章节:</span>
  128.                             </div>
  129.                         </div>
  130.                         <div style="float:left;width:70%">
  131.                             <div  class = "easyui-panel line left-border" data-options="fit:true" style="text-align:center">
  132.                                 <a href='#' class='easyui-linkbutton' style="margin:2px 15px" >选择</a>
  133.                                 <a href='#' class='easyui-linkbutton' style="margin:2px 15px" >新建</a>
  134.                             </div>
  135.                         </div>
  136.                     </div>
  137.                 </div>
  138.                 <div data-options="region:'east'" style="width:40%">
  139.                     <div class="easyui-panel none-border" style="padding:5px;" >
  140.                         <ul class="easyui-tree" data-options="url:'jsons/add_material_tree.json',method:'get',animate:true" style="border:none"></ul>
  141.                     </div>
  142.                 </div>
  143.             </div>
  144.         </div>
  145.         <div class = "easyui-panel line none-border" >
  146.             <a href='#' class='easyui-linkbutton' style="margin:2px" >导入Excel</a>
  147.         </div>
  148.          <div style="height:100%;">
  149.             <div data-options="region:'center'">
  150.                     <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'" >
  151.                         <thead>
  152.                             <tr>
  153.                                 <th data-options="field:'code',width:'20%',align:'center'">材料编码</th>
  154.                                 <th data-options="field:'name',width:'20%',align:'center'">材料名称</th>
  155.                                 <th data-options="field:'type',width:'8%',align:'center'">规格型号</th>
  156.                                 <th data-options="field:'uinit',width:'8%',align:'center'">单位</th>
  157.                                 <th data-options="field:'budgetary_price',width:'20%',align:'center'">预算价</th>
  158.                                 <th data-options="field:'market_price',width:'20%',align:'center'">市场价</th>
  159.                             </tr>
  160.                         </thead>
  161.                     </table>
  162.             </div>
  163.             <div data-options="region:'south'" style="height:50px;">
  164.                 <div style ="width:100%;text-align:center">
  165.                     <a href='#' class='easyui-linkbutton' style="margin:10px 25px" >保存</a>
  166.                     <a href='#' class='easyui-linkbutton' style="margin:10px 25px" >取消</a>
  167.                 </div>
  168.             </div>
  169.         </div>
  170.     </div>
  171. </body>
  172. </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. Python模块(MySQLdb)

    MySQLdb模块是python用来连接mysql的第三方模块,安装 pip install mysql-python 连接mysql: 主要两步,建立mysql连接对象.游标对象.再操作数据库 im ...

  2. Web开发学习

    这几天天天学习网络开发的一些东西,接触了好些概念.原本打算自己弄个个人博客,BlogEngine.net已经做的很好了,可以直接拿来用而且源码开放.做的很不错,是WebForm的.本来打算好好学习一下 ...

  3. javascript设计模式学习之十——组合模式

    一.组合模式定义及使用场景 组合模式将对象组合成树形结构,用以表示“部分—整体”的层次结构,除了用来表示树形结构之外,组合模式还可以利用对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性. ...

  4. iOS TPKeyboardAvoiding自动识别键盘的高度

                     #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicatio ...

  5. Xcode 6.x 添加Empty Application模板

    Xcode 6.x 添加Empty Application模板 在Apple最新的XCode6.x中没有了Empty Application模板,这对一个老人来说是不能别接受的,同时也可以看出Appl ...

  6. iOS获取运营商的相关信息

    1.导入:CoreTelephony.framework 2.添加头文件 #import <CoreTelephony/CTTelephonyNetworkInfo.h> #import ...

  7. Lintcode: Binary Tree Serialization (Serialization and Deserialization Of Binary Tree)

    Design an algorithm and write code to serialize and deserialize a binary tree. Writing the tree to a ...

  8. Lintcode: Merge Sorted Array II

    Merge two given sorted integer array A and B into a new sorted integer array. Example A=[1,2,3,4] B= ...

  9. zabbix监控linux文件的一个目录大小

    监控linux文件的一个目录大小 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.       欢迎加入:高级运维工程师之路 598432640 我们知道,Linux自带的一些监控模板 ...

  10. SQL null值 查询null

    select * from emp;