Having just come across a situation where I need a container to scale its height proportionally to its width for a responsive site, I am posting my solution here.
When stating values as a percentage, they are calculated as a percentage of the width. So the wrapper is given a height of 0 and top padding as a percentage of the width. The inner div must then be absolutely positioned (in relation to the wrapper) to overlay the wrapper.

<!-- HTML snippet -->

<div class="wrapper">
<div class="inner">
<p>Some content here</p>
</div> <!-- /inner -->
</div> <!-- /.wrapper -->

/* CSS snippet */

.wrapper {
position: relative;
width: 400px;
height: 0;
padding-top: 50%;
}

.inner {
position: absolute;
top: 0;
}