通过拖放调整大小并重新排列div。 drop和动态CSS

Question

我有两个div，我希望我的用户能够点击一个按钮并排列这两个div上/下或左/右。我已经实现了它，但无论何时我左右排列它们，右边的div经常溢出到左边div的底部。

我已经看到another similar example谈到调整左/右div的大小，但我仍然不知道究竟是什么导致我的右div溢出。任何帮助表示赞赏！

以下是我的例子：

var d = $('#divider'); // divider between top and bottom divs
var t = $('#tl'); // top/left div
var b = $('#br'); // bottom/right div
var h = $('body').height();
var w = $('body').width();
var isDragging = false;
var isLandscape = false;

d.mousedown(function(e) {
  isDragging = true;
});
$(document).mouseup(function() {
  isDragging = false;
}).mousemove(function(e) {
  if (isDragging) {
    if (!isLandscape) {
      t.css('height', e.pageY);
      b.css('height', h - e.pageY - d.height());
      d.css('height', h - t.height() - b.height());
    } else {
      t.css('width', e.pageX);
      b.css('width', w - e.pageX - d.width());
      d.css('width', w - t.width() - b.width());
    }
  }
});

var rotateBtn = document.getElementById('rotateScreen');
if (rotateBtn) {
  rotateBtn.addEventListener('click', rotateDisplay, false);
} else {
  throw error;
}

function rotateDisplay() {
  if (!isLandscape) {
    isLandscape = true;
    t.css('height', h);
    t.css('width', Math.round(0.75 * w));
    b.css('height', h);
    b.css('width', Math.round(0.24 * w));
    d.css('height', h);
    d.css('width', w - t.width() - b.width());
    d.css('cursor', 'w-resize');
  } else {
    isLandscape = false;
    t.css('height', Math.round(0.75 * h));
    t.css('width', w);
    t.css('float', 'left');
    b.css('height', Math.round(0.24 * h));
    b.css('width', w);
    b.css('float', 'left');
    d.css('height', h - t.height() - b.height());
    d.css('width', w);
    d.css('cursor', 'n-resize');
    d.css('float', 'left');
  }
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#br {
  width: 100%;
  height: 24%;
  float: left;
  background: gold;
}

#tl {
  width: 100%;
  height: 75%;
  float: left;
  background: navy;
}

#divider {
  height: 1%;
  background: #fff;
  float: left;
  width: 100%;
  cursor: ns-resize;
}

#control {
  position: absolute;
  z-index: 5;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control">
  <button id="rotateScreen">&#128257;</button>
</div>
<div id="tl">This is the top/left div</div>
<div id="divider"></div>
<div id="br">This is the bottom/right div</div>