Html 调整dijit.Layout.ContentBorder中dijit.Layout.ContentPanes的大小_Html_Css_Dijit.layout

Html 调整dijit.Layout.ContentBorder中dijit.Layout.ContentPanes的大小

html css

Html 调整dijit.Layout.ContentBorder中dijit.Layout.ContentPanes的大小,html,css,dijit.layout,Html,Css,Dijit.layout,我在dijit布局内容边框中有两个dijit布局内容窗格。我已经尝试设置样式，以便所有内容都可以动态调整大小，但我仍然看到问题。在所有浏览器中，全屏显示使地图内容窗格覆盖右侧窗格。map类似乎没有动态调整大小，只有rightPane 窗格的设置如下所示： <body class="claro"> <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-p

我在dijit布局内容边框中有两个dijit布局内容窗格。我已经尝试设置样式，以便所有内容都可以动态调整大小，但我仍然看到问题。在所有浏览器中，全屏显示使地图内容窗格覆盖右侧窗格。map类似乎没有动态调整大小，只有rightPane

窗格的设置如下所示：

<body class="claro">

  <div id="content"
       data-dojo-type="dijit/layout/BorderContainer"
       data-dojo-props="design:'headline', gutters:true"
       style="width: 100%; height: 100%; margin: 0;">

      <div id="rightPane"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'right'">

          <div data-dojo-type="dijit/layout/AccordionContainer">
              <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
                   data-dojo-props="title:'Légende', selected:true">
                  <div id="legendDiv"></div>
              </div>
              <div data-dojo-type="dijit/layout/ContentPane"
                   data-dojo-props="title:'Pane 2'">
              </div>
          </div>
      </div>
      <div id="map"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'"
           style="overflow: hidden;">
      </div>
      <div id="search"></div>
  </div>

</body>

UPATE 在处理css值时，我将map类的宽度设置为75%，将右窗格类的宽度设置为20%。在调整窗口大小之前，这将提供一个不错的结果：

这看起来更接近我的想法（还没有挑剔不平的顶部边缘……但我愿意接受建议）：

但当我调整并放大窗口时，会发生以下情况：

当“贴图宽度”值设置为78%时，内容窗格重叠：

以前从未使用过JSFIDLE，但我尝试使用一些示例服务来安装该应用程序。让我知道你是否可以访问此

html, body {
  height: 97%;
  width: 98%;
  margin: 1%;
}

#search {
   display: block;
   position: absolute;
   z-index: 2;
   top: 20px;
   left: 74px;
}

#rightPane {
  width: 20%;
}

#map {
  width: 80%;
}

#legendPane {
  border: solid #97DCF2 1px;
}