标签：
单独设置界面中特定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: 10%; width: 80%; } .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 ="200"/> </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 ="300"/> </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>
标签：
原文地址：http://www.cnblogs.com/shenchao/p/4653851.html
