Square DIV where height is equal to viewport

CSS3 has a way of doing this using vw, viewport width, and vh, viewport height. Using these measures, 100vw is the entire width of the viewport, and 100vh is the entire height. More information about relative css3 values and units here.

As of writing this, the only support however is for Internet Explorer 9, so this is probably not what you're looking for, but is something good to keep in mind when future support follows.

CSS only solution : vh units

To make the element resize according to the height of the viewport you can use vh units :

vh : 1/100th of the height of the viewport. [source MDN]

Example:

body{margin:0;}

div{
    background:gold;
    height:100vh;
    width:100vh;
}

<div></div>

Fiddle DEMO

This will make the width and height of the element equal to the height of the viewport.

Bowser support for vh units is IE9+. More info here

There is a neat trick using pure css that i stumbled upon:

#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

Hope that helps.

http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/

You can do this with jquery (or pure javascript if you prefer).

With jquery:

<div id="square">
</div>

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});