Redimensionamento via JS
http://pt.stackoverflow.com/q/4572/4220
HTML
<div id="wrap">
<div class="left">Menu</div>
<div class="right">
<div class="ratio">
<div class="slide">Aqui é minha area proporcional</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">
<p>Rodapé</p>
</p>
</div>
</div>
CSS
body, html {
height: 100%;
margin: 0 0 0 0;
}
#wrap {
margin: 0 auto -60px;
min-height: 100%;
overflow: hidden;
height: 100%;
}
#footer {
background: #ccc !important;
position: relative;
}
#footer .container p {
margin-top: 21px;
text-align: center;
color: #808080;
}
#push, #footer {
height: 61px;
}
.left {
width: 20%;
background: red;
height: 100%;
float: left;
}
.right {
width: 80%;
height: 100%;
float: left;
background: orange;
}
.right .slide {
background: #a0d;
}
.right .ratio {
max-height: 715px;
}
JavaScript
var slide = document.querySelector('.slide');
var aspectRatio = 1; // proporção de aspecto do div .slide
function resize() {
// verifica as funcoes
var newHeight = document.documentElement.offsetHeight-39; // espaço ocupado pelo footer
var newWidth = 0.8 * (document.documentElement.offsetWidth); // largura disponível: 80% do documento
var newWidthToHeight = newWidth / newHeight;
// ajusta o div mantendo as proporções de aspecto definidas por aspectRatio
if (newWidthToHeight > aspectRatio) {
newWidth = newHeight * aspectRatio;
} else {
newHeight = newWidth / aspectRatio;
}
slide.style.width = newWidth + 'px';
slide.style.height = newHeight + 'px';
}
// efetua um redimensionamento inicial
resize();
// redimensiona o slide sempre que a janela for redimensionada
window.addEventListener('resize', resize, false);
// (!) utilize a função resize sempre que o div .slide sofrer alterações