html - 具有比例的响应式 div 大小

Question

我有这个设置:

<div class="wrapper">
    <div class="container"> <div class="inner"></div></div>
</div>

.wrapper {
    max-width:320px;
    max-height:240px;
}
.container {
    position:relative;
    padding-top:56.25%;
    background:green;
}
.inner{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

http://jsfiddle.net/3A32T/2/

如果缩小窗口宽度，div 尺寸会缩小，同时保持纵横比，这正是我想要的。

但是，如果您缩小窗口高度，div 高度不会缩小，您将获得浏览器滚动。

有没有办法也实现第二个条件？

Answer 1

已更新 DEMO在这里。

将 padding-top 更改为 height

写:

html,body,.wrapper{
    height:100%;
    width:100%;
}
.container {
    height:56.25%;
}