Div Square, width size based on 100% height

You could do this with a tiny inline image. No JS, no extra files.

.container {
  height: 150px;
  width: 100%;
  text-align: center;
  background: #acd;
}
    	
.square {
  display: inline-block;
  height: 100%;
  background: #691;
}

<div class="container">
  <div class="square">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
  </div>
</div>

For a CSS-only solution (where you're sizing relative to the screen size), use viewport units. For example:

@media screen and (orientation:landscape) {
    .box{
        height: 100vh;
        width: 100vh;
    }
}
@media screen and (orientation:portrait) {
    .box{
        height: 100vw;
        width: 100vw;
    }
}

(You may want to reduce it to 98 units to eliminate scrolling)

Works great for divs that need to take up a precise proportion of screen space.

JSFiddle here.

I think this can be a good 'css only' solution for you. Cross browser working.

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

Good to highlight this nice css rule:

If the vertical paddings (and margins) are specified in percent (%) values the size is a percent of the width of the containing element.