title: 100vh, 50% and responsiveness
body: <p>I have these stacked div's that are <code>height: 100vh;</code> (polyfills are present). Then inside of that div, I have 8 div's that are are suppose to be a perfect square, i use the <code>width: 0;</code> and <code>padding-left: 25%;</code> trick for that. but I would like to know how can I get the 2 rows to always fit inside the <code>height: 100vh;</code> div and scale down maintaining that <code>1:1</code> ratio.</p>
  
  <p>I have supplied a <a href="http://jsfiddle.net/uhaef0wd/" rel="nofollow">JSFiddle</a> to get started. </p>