Div with 100% height and a particular aspect ratio

Question

How can I have a div with 100% height that has a particular aspect ratio, e.g. 2:3?

For example, if the outer element has a height of 900px, the width of the inner element should be 600px, but this should be responsive.

I don't want to use any JavaScript for this.

Using the CSS3 flexible box model would be fine.

Answer 1

If you are targeting modern browsers that support CSS3, you can try the following.

Consider the following HTML snippet:

<div class="wrapper">
    <div class="inner">Inner content...</div>
</div>

and apply the following CSS rules:

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.wrapper {
    background-color: lightblue;
    height: 100%;
}
.wrapper .inner {
    margin: 0 auto;
    background-color: beige;
    height: 100%;
    width: 66.6666666666vh;
}

The .wrapper element takes up 100% of the view port height because I have set height: 100% on the body and html elements.

The inner wrapper .inner has a height: 100% and fills up the parent block.

To set the .inner width, use the viewport-percentage length vh that scales with the height of the parent block.

In this example, 66.66vh means 66.66% of the vertical height, which corresponds to a 2:3 aspect ratio (width:height).

See demo at jsFiddle

Reference: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Browser Compatibility
The vh unit and other vertical percentage lengths have pretty good support with the latest browsers, see the reference below for more details.

See reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility

Alternative Approach Using a Spacer Image

Consider the following HTML:

<div class="ratio-wrapper">
    <img class="spacer" src="http://placehold.it/20x30">
    <div class="content">Some content...</div>
</div>

and apply the following CSS:

.ratio-wrapper {
    position: relative;
    display: inline-block;
    border: 1px solid gray;
    height: 500px; /* set the height or inherit from the parent container */
}
.ratio-wrapper .spacer {
    height: 100%; /* set height: 100% for portrait style content */
    visibility: hidden;
    vertical-align: top;
}
.ratio-wrapper .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 20px;
}

The .ratio-wrapper container has two child elements, an img.spacer and div.content. The image as a portrait aspect ratio, for example, 20x30 (wxh) and is set to expand to fill the height of the parent container using height: 100%. The image is hidden from view but retains its space in the parent block.

The .content element is positioned absolutely to fill the parent container and can contain any content. Because .content is constrained in height and width, the content could overflow in some cases, so setting overflow: auto may be appropriate.

See demo at: http://jsfiddle.net/audetwebdesign/BVkuW/

Related question and answer:
In Fluid Container, Can I Make Elements as Tall as they Are Wide?