两个div宽度全屏，宽度任意调节

未了实现两个div布满屏幕，且宽度可调，做了如下效果，具体效果如下图所示：

页面代码：

 <div class="mapBox" id="map2D" ></div>
    <div id="line"></div>
    <div class="mapBox" id="map3D" ></div>

css样式

.mapBox{
    position: relative;
    float: left;
    width: calc(50% - 2px);
    height: 100%;
    left: 0;
    top: 0;
    /*border: 1px solid black;*/
    /*box-sizing: border-box;*/
}
#line{
    position: relative;
    float: left;
    width: 4px;
    height: 100%;
    left: 0;
    top: 0;
    cursor: w-resize;
    border: 1px solid red;
    box-sizing: border-box;
}

js代码

var line = $("#line");
var map2D = $("#map2D");
var map3D = $("#map3D");
var box = $("#box");
var isMove = false;
var x = 0;

line.mousedown(function (e) {
    isMove = true;
    x = e.pageX;
});
line.mouseup(function () {
    isMove = false
});
box.mouseup(function () {
    isMove = false
});

box.mousemove(function (e) {
    if (isMove) {
        console.log(e.pageX);
        var width2d = map2D.width();
        var width3d = map3D.width();
        map2D.width(width2d + e.pageX - x);
        map3D.width(width3d - e.pageX + x);
        x = e.pageX;
    }
});