html - 如何使地图适合显示表中的 div 框

Question

我想用这种方式渲染地图display:table。

但它似乎没有遵循固定的高度，当我单击一个显示 4 个地图的按钮时，使 div 变大。map13我为单击时设置了 50% 的高度button #four。 有没有办法让地图适合 div 框？还是我不应该使用 display:table？

function divideMap(divisionType) {
  $('#map24').css('display', 'none');
  $('#map3').css('display', 'none');

  if (divisionType === 'four') {
    $('#map13').css('height', '50%');
    $('#map13').css('width', 'auto');

    $('#map24').css('display', 'table-row');
    $('#map3,#map4').css('display', 'table-cell');
  } else if (divisionType === 'two vertical') {
    $('#map3').css('display', 'table-cell');
  } else if (divisionType === 'two horizontal') {
    $('#map24').css('display', 'table-row');
    $('#map4').css('display', 'none');
  } else {

  }
  mainMap.updateSize();
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
}

#header {
  height: 10%;
  width: 100%;
  background-color: silver;
  float: left;
}

#main {
  height: 90%;
  width: 100%;
}

#contents {
  height: 100%;
  width: 100%;
}

#fullscreen {
  height: 100%;
  width: 100%;
  display: table;
  table-layout: fixed;
}

#map13 {
  display: table-row;
}

#map1 {
  display: table-cell;
  border: 1px solid black;
}

#map3 {
  display: none;
  border: 1px solid black;
}

#map24 {
  display: none;
}

#map2 {
  display: table-cell;
  background-color: darkslategray;
  border: 1px solid black;
}

#map4 {
  display: table-cell;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  <button onclick="divideMap('original')">reset</button>
  <button onclick="divideMap('two vertical')">two vertical</button>
  <button onclick="divideMap('two horizontal')">two horizontal</button>
  <button onclick="divideMap('four')">four</button>
</div>
<div id="main">
  <div id="contents">
    <div id="fullscreen">
      <div id="map13">
        <div id="map1">
        </div>
        <div id="map3">
        </div>
      </div>
      <div id="map24">
        <div id="map2">
        </div>
        <div id="map4">
        </div>
      </div>
    </div>
  </div>
</div>

标签： htmlcssopenlayers