div resize test

by Evgenii Malikov

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<div ng-app>
  {{1+2}}
  <input type="range" ng-model="win.height">

  <div class="windowBox" ng-style="{height: win.height+'px'}">
    <div class="transom">
      0
    </div>
    <div class=windowsAndWall>
      <div class="windows">
        1
      </div>
      <div class="wallBlock">
        2
      </div>
    </div>
    <div class="balconyDoor">
      3
    </div>

  </div>
</div>

CSS

div {
  box-sizing: border-box
}

div.transom {
  border: 1px dashed black;
  height: 20%
}

div.windowBox {
  border: 1px solid lime
}

div.windowsAndWall {
  width: 50%;
  height: 100%;
  float: left
}

div.windows {
  height: 50%;
  border: 1px dotted orange;
}

div.wallBlock {
  border: 1px solid grey;
  height: 30%;
}

div.balconyDoor {
  width: 50%;
  height: 80%;
  border: 1px dotted blue;
  float: left
}