Square DIV where height is equal to viewport

Question

I need to create a DIV where width=height, and height=100% of the viewport (which, obviously, is variable).

In other words, a perfectly sq

Answer 1

One additional trick I came up with to help partially solve this problem, for anybody who stumbles across this page... Run the following code in your page's onload event:

$('body').css('font-size',$(window).height()/100)

This means the css "em" unit is equal to 100th of your page height- You can now arbitrarily use this in your css file to size any item relative to your viewport height. This is more generic than the other solutions listed here- And most likely you want to size all of the elements of your page to take into account your viewport height. For instance, if you now want to create your square you can just write:

#square{width:100em;height:100em}

Of course, you'll also have to take this into account for any text on your page (since this trick affects the font size)