垂直div容器不使用calc（） - Opera / Safari进行渲染

Question

我有两个比率div容器和一个分隔条div。不幸的是，底部容器不是Opera或Safari渲染的。如何通过保持calc（）概念来形成底层的？

＆＃13;

＆＃13;

function GetHeight() {
  var element = document.getElementById("bottomContent");
  if (element) {
    if (element.getBoundingClientRect) {

      var rect = element.getBoundingClientRect();
      var absHeight = getAbsoluteHeight(element);

      alert(" rectHeight: " + rect.height + "\n offset height: " + element.offsetHeight + "\n client height: " + element.clientHeight + "\n abs height: " + absHeight);

    } else {
      alert("Browser does not support!");
    }
  } else {
    alert("No element!");
  }
}

function getAbsoluteHeight(el) {

  el = (typeof el === 'string') ? document.querySelector(el) : el;

  var styles = window.getComputedStyle(el);
  var margin = parseFloat(styles['marginTop']) +
    parseFloat(styles['marginBottom']);

  return Math.ceil(el.offsetHeight + margin);
}

＆＃13;

html,
body {
  height: 95%;
}
.content {
  background: rgba(221, 221, 221, 0.41);
  min-width: 5px;
  width: 100%;
  height: 100%;
}
.splitCntainerVertical {
  width: 100%;
  height: 100%;
  min-width: 5px;
  margin: auto;
  overflow: hidden;
}
.splitCntainerTopContent {
  width: 100%;
  min-height: 5px;
  margin: auto;
  overflow: hidden;
}
.splitCntainerBottomContent {
  width: 100%;
  min-height: 5px;
  margin: auto;
  overflow: hidden;
}
.splitterVertical {
  border-radius: 2px;
  background: rgba(31, 37, 37, 0.41);
  margin-top: 10px;
  margin-bottom: 10px;
  height: 5px;
  width: 100%;
  cursor: n-resize;
}

＆＃13;

<button onclick="GetHeight()">Get bottom container height</button>

<div class="splitCntainerVertical">
  <div class="splitCntainerTopContent" style="height:65%;">
    <div class="content"></div>
  </div>

  <div id="splitter" class="splitterVertical"></div>

  <div id="bottomContent" class="splitCntainerBottomContent" style="height: calc(35% - 25px);">
    <div class="content"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

有什么想法吗？