Square DIV where height is equal to viewport

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

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

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