На днях возникла необходимость, что бы высота элемента была пропорциональна ширине элемента.

Получился вот такой простенький кодик:

.element {
   position: relative;
   width:60%;
   height: 0;
   padding-bottom: 22%;
}

Как ни странно, но это работает во всех браузерах =)

Упс, выяснилось, что внутри блока height 100% не будет работать =(

Вот такой метод работает:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
        <div id="mess">lorem ipsum blah blah blah blah
            lorem ipsum blah blah blah blah
            lorem ipsum blah blah blah blah
          </div>
    </div>
</div>

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#container:before{content:"";display:block;margin-top:100%;}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
    overflow: hidden;
    overflow-x: auto;
    overflow-y: auto;
}

ДЕМО