Как сделать height-зависимые блоки?

Есть такая разметка:

<div id="wrapper">
<main></main>
<aside></aside>
</div>
<footer></footer>

#wrapper{
height:auto;
overflow:hidden
}
main{
height:auto;
overflow:hidden
}
aside{
height:1000px;
overflow:auto
}

Надо сделать высоту aside плавающей, а не фиксированной(кроссбраузерность хромает), но в нем есть вертикальная прокрутка(>main приблизительно в два раза), если оставить так как есть, то между main и footer появляется много свободного места, как сделать чтобы высота aside была везде и всегда равна блоку main? Может есть какие-то варианты javascript?