layout 100% to right and bottom

by bighostkim

HTML

<script src="https://rawgithub.com/bighostkim/draggable/master/draggable.js"></script>
<div class="container">
    <div class="left"></div>
    <div class="divider"></div>
    <div class="right">
        <div class="box">
            <div></div>
        </div>
    </div>
</div>

CSS

html, body {width: 100%; height: 100%}
div {box-sizing: border-box}

.container { position:relative; background:#ccc; height: 100% }
.left, .divider, .right {position:absolute; top:0px; bottom:0px; right: 0px; height: 100%}
.left {left:0px; width: 100px; background:red }
.divider {left:100px; width: 10px; background: green}
.right {left:110px; background:blue }
.right .box {position:relative; height: 100%; border:50px solid #ccc;}
.right .box > div {position:absolute; bottom: 10px; left: 10px; right: 10px; background:#333; height:10px;}

JavaScript

window.onload = function() {
  var leftEl = document.querySelector(".left");
  var divider = document.querySelector(".divider");
  var rightEl = document.querySelector(".right");
  var startRect;
  new Draggable(divider, {
    boundary: document.querySelector(".container"),
    clone: true,
    start: function(event, el) {
      startRect = {
        left: leftEl.getBoundingClientRect(), 
        divider: divider.getBoundingClientRect(),
        right: rightEl.getBoundingClientRect()
      };
    },
    drag: function(event, el, move) { //event : mousemove event, el: dragging element
      leftEl.style.width  = startRect.left.width + (parseInt(el.style.left) - startRect.divider.left) + "px";
      rightEl.style.width = startRect.right.width + (startRect.divider.left - parseInt(el.style.left)) + "px";
    }
  });
};