我试图完成我的应用程序，并且在尝试调整bordercontainer的大小以允许单击搜索按钮时显示隐藏的div时遇到一些HTML / CSS问题。
以下是初始加载时我的应用程序的简单说明：
这是我希望应用程序在单击搜索按钮后看起来的样子：
以前，我使用以下代码来调整中心窗格的大小：
dojo.style(dijit.byId("map"), "height", "83%");
这不再起作用。
我的HTML是：
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:55px;margin:0;">
<!--Header Logo-->
<div id="headerlogo"
< a href="http://www.marioncountyfl.org/InformationSystems/IS_GIS.aspx"><img src="images/map1.png" alt="View Logo" /></a>
</div>
<!--Header-->
<header>Zoning Classifications</header> <div style="position:absolute; right:160px; top:10px; z-Index:99;"></div>
</div>
<!--Help Button-->
<div id="help" title="Help";>
<a href="help.html"><img src="images/Help1.png" alt="Help" style="border:none" /></a>
</div>
<!--Basemap Gallery-->
<div id="subheader" style="position:absolute; right:60px; top:10px; z-Index:98;">
<div id="basemapbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">
<img src="images/imgBaseMap.png"/>
<script type="dojo/method" event="onClick">
toggler[(dojo.style("basemaptoggle","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
<div id="basemapGallery">
</div>
</div>
</div>
<!--Search-->
<div id="search" >
Parcel ID: <input type="text" id="parcel" size="20" value="4209-111-074" />
<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}, value:"Search"'">
Search
</button>
</div>
</div>
<!--TOC-->
<div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 95%;">
<div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
<div id="tocDiv">
</div>
</div>
<!--Map-->
<div id="map" dojotype="dijit.layout.BorderContainer" region="center" style="height:100%; doLayout:'false'">
<div class="watermark">
<a href="http://www.marioncountyfl.org/InformationSystems/IS_GIS.aspx"><img src="images/MCLogo.png" alt="View Logo" style="border:none" /></a>
</div>
<!--Data Grid-->
<div id ="datagrid" data-dojo-type="dijit.layout.ContentPane" splitter="true" region="bottom" style="width:100%; height:125px;">
<table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field="Parcel Identification Number" width="10%">
Parcel ID
</th>
<th field="Assessing Neighbornood Code" width ="20%">
Neighborhood Code
</th>
<th field="Property Class Code" width="10%">
Property Class
</th>
<th field="Site Address" width="57%">
Address
</th>
<th field" width="2%"> <div class="GridCloseIcon" title="Close Grid" onclick="esri.hide(datagrid)"></div>
</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!--Splash Screen-->
<div id="dialogLoadMessage" dojotype="dijit.Dialog" style="width: 350px;">
<table>
<tr>
<td>
<div id="divLoadMessage" style="text-align:center">
</div>
</td>
</tr>
<tr>
<td align="center">
<div class="divOk" onclick="dijit.byId('dialogLoadMessage').hide();">
OK
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
任何帮助将不胜感激。
最佳答案
通过在父内容ContentPane上调用addChild()和removeChild()来添加或删除datagrid BorderContainer。
实际观看：http://jsfiddle.net/phusick/7WRSh/