Сделайте две колонки с одинаковой высотой

Question

Я использовал jquery и css для создания раскладки в 2 столбцах. Один столбец с основным содержимым div, другой - боковой панелью.

код JQuery является

var divone = jQuery(".main-content").height(); 
var divtwo = jQuery(".sidebar").height(); 
var mainheight = $(window).height() - $('header').height() - $('footer').height(); 
jQuery(".main-content").height(mainheight); 
jQuery(".sidebar").height(mainheight); 

Демо в demo.

Мой вопрос заключается в том, что он хорошо работает только в Firefox и хром. Это перепутано в IE 10.

Я надеюсь, что он работает во всех основных браузерах. Спасибо за помощь.

UPDATE:

Answer 1

хорошо я сделал правку в jsfiddle

var t_height =$('html').height(); 
var h_height =$('.header').height(); 
var f_height =$('footer').height(); 
alert(t_height) 
alert(h_height) 
alert(f_height) 
var div_h = t_height-h_height-f_height; 
var divone = jQuery(".main-content").css('height',div_h); 
var divtwo = jQuery(".sidebar").css('height',div_h); 

но suddenky я понял, что ваш пример также работал для меня в IE10

сделал некоторые изменяется на html, но они не являются обязательными