Jquery calc процентная ширина минус пикселей, не возвращающая упругую колонку

Question

Я пытаюсь обойти проблему css calc с помощью jquery (поскольку calc не работает в Explorer) , но когда я устанавливаю ширину минус пиксели, столбцы не являются упругими больше и все накладывается на jsfiddle (отлично, когда я тестирую его из textedit). Обратите внимание, что мне нужно иметь столбец слева и посередине как фиксированное позиционирование, чтобы только правый прокручивался вниз при переполнении содержимого.

Любые идеи?

Большое спасибо!

http://jsfiddle.net/Alga/PHv6S/

CSS:

html, body { width:100%; margin:0; padding:0; font-size:87.5%; } 

.middle { 
    position:fixed; 
    margin-top:20; 
    margin-left:170; 
    background:yellow; 
    margin-bottom:20px; 
    margin-right:40px; 
} 

.left { 
    position:fixed; 
    top:20px; 
    left:20px; 
    background:blue; 
    width:130px; 
} 

.right { 
    float:right; 
    background:blue; 
    margin: 20px 20px 20px 0; 
} 

HTML:

<div class="left"></div> 
<div class="middle"></div> 
<div class="right"></div> 

JavaScript:

$(document).ready(function() { /* standard jQuery document ready */ 
    $('.left').css('height', '100%').css('height', '-=40px'); 
    $('.middle').css('width', '40%').css('width', '-=20px'); 
    $('.middle').css('height', '100%').css('height', '-=40px'); 
    $('.right').css('width', '60%').css('width', '-=190px'); 
    $('.right').css('height', '100%').css('height', '-=40px'); 
}); 

Answer 1

Попробуйте это:

http://jsfiddle.net/PHv6S/3/

$('.middle').css('width', '100%').css('width', '-=260px'); 

$(window).on('resize', function(){ 
    $('.middle').css('width', '100%').css('width', '-=260px'); 
});