Javascript 单击可调整边框容器的大小
我正试图完成我的应用程序，当我试图调整bordercontainer的大小以允许在单击搜索按钮时显示隐藏的div时，遇到了一些HTML/CSS问题 以下是我的应用程序在初始加载时的简单示例： 这是我希望应用程序在单击搜索按钮后的外观： 之前，我使用以下代码调整中心窗格的大小：Javascript 单击可调整边框容器的大小,javascript,html,css,dojo,resize,Javascript,Html,Css,Dojo,Resize,我正试图完成我的应用程序，当我试图调整bordercontainer的大小以允许在单击搜索按钮时显示隐藏的div时，遇到了一些HTML/CSS问题 以下是我的应用程序在初始加载时的简单示例： 这是我希望应用程序在单击搜索按钮后的外观： 之前，我使用以下代码调整中心窗格的大小： dojo.style(dijit.byId("map"), "height", "83%"); 这已经不起作用了 我的HTML是： </scr
dojo.style(dijit.byId("map"), "height", "83%");
</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>
分区分类
切换程序[（dojo.style（“basemaptoggle”，“display”）=“none”）？“show'：“hide”]（）；
包裹编号：
如果添加并切换底部网格的填充-使用框大小：边框框
-而不是调整中心窗格的大小。使用js
添加和删除填充，当其处于活动状态时，填充应反映底部网格的高度，当其处于非活动状态时，填充可能反映0px
。如果中心窗格内容具有位置：绝对和高度：100%
，则应易于缩放。我已经广泛使用该方法对大规模应用程序产生了巨大影响，它还具有跨浏览器兼容性，但是如果您需要支持IE的旧版本，请确保使用框大小：边框框
polyfill来强制执行框模型
有关盒大小的详细信息，请通过调用其父内容BorderContainer
上的addChild（）
和removeChild（）
来添加或删除datagridContentPane
在行动中看到它：这看起来不错。可能是一个N00b问题，但我有一个搜索功能，我在其中放置了esri.show（datagrid）代码，以便在单击搜索按钮时显示。考虑到您发布的小提琴，我如何将搜索与节目链接？我建议直接调用函数来addChild
和removeChild
，但如果不能，您可以使用。我更新了前面提到的JSFIDLE来解释它是如何工作的。