Scale element to proportionally fill space - css

Question

The example below has an gray div (#outer) with a child orange div (#inner). #inner will fill the page proportionally on width only. Is it possible to have #inner scale proportionally based on width and height using only CSS? Please, no Javascript solutions as I am aware of how to accomplish it that route, but would prefer a CSS solution if possible.
http://jsfiddle.net/Gchr4/
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#outer {
background-color: #EFEFEF;
width: 100%;
height: 100%;
}
#inner {
background-color: #ff9933;
width: 100%;
padding-top: 50%;
}
HTML
<div id="outer">
<div id="inner"></div>
</div>
Javascript example of what I am attempting to achieve: http://jsfiddle.net/Q4Qdy/

Answer 1

Use height:100% for the #inner.
However, due to your padding, the height will add 50% to it. This will be fixed by using box-sizing:border-box, but this still has some browser issues. So if you don't have to add padding, i would suggest to remove it.
working example
#inner {
background-color: #ff9933;
width: 100%; height: 100%;
padding-top: 50%;
box-sizing: border-box;
}

Answer 2

It is possible using media queries (and min-aspect-ratio, in particular) and viewport units: http://jsfiddle.net/79Fhb/.
HTML:
<div id="outer">
<div id="inner"></div>
</div>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#outer {
background-color: #bbb;
height: 100%;
}
#inner {
background-color: #ff9933;
}
#inner:before {
content: "";
display: block;
padding-top: 50%;
}
#media screen and (min-aspect-ratio: 2/1) {
#inner {
height: 100%;
width: 200vmin;
}
}