使两个列布局具有相同的高度

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和chrome。它在IE 10中搞砸了。

我希望它适用于所有主流浏览器。谢谢你的帮助。

更新

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);

但突然我意识到你的例子在IE10中也适用于我

对html进行了一些更改，但这些更改不是必需的