CSS sizing to fill parent, staying square

Is there a purely CSS-based way to size a block-level element such that it fills its parent as much as possible, but remains square?

An interesting use case

I have written a very simple analogue clock using mostly CSS, and a pinch of JavaScript.

http://jsbin.com/iqicuk

It has been written scalably:

http://jsbin.com/emiyer

I would like to scale it to fill the page, but stay in proportion, obviously.

If I set the width and height of #clock to 100%, of course, it will be pulled out开发者_如何学JAVA of proportion:

http://jsbin.com/esubol

You can't do that with pure CSS, but you can do it with Javascript - and I assume you have Javascript running anyway to resize the parent element.

A solution in progress

thirtydot came up with a very clever technique that takes advantage of the fact that images with only one defined dimension scale proportionately, and he harnesses this to size the element. We now have a clock that can scale properly, but only if the viewport width is greater than the height, not the other way around:

http://jsbin.com/isixug

Likewise, if we change img and #clock to have a defined width, instead of a defined height, then we have a clock that can scale properly, but only if the viewport height is greater than the width:

http://jsbin.com/awucun

The solution

We can combine the two 'tricks' above, that each only work for one orientation, by using a media query for orientation, and specifying the right 'trick' depending on the viewport orientation. We now have a completely scalable clock, no matter what the viewport orientation or size:

http://jsbin.com/okodib

Any in flow block level element will already inherit the width from its parent. For the height however you will need to find an alternative.

I doubt this is something you will want to do but if you set your parent to position: relative; and then the child you want to make fill up that parent position: absolute;. Then specify where it needs to stick to relative to its parent with top:0;left:0;bottom:0;right:0;.

However this solution has compatibility issues in lower versions of IE and is rarely acceptable for application...

As Jens Roland already said, this is not possible through pure CSS. Maybe LESS is helpful to you.