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

我使用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);

演示在

我的问题是，它只在firefox和chrome中运行良好。在IE 10中它被搞得一团糟

我希望它能在所有主流浏览器中运行。谢谢你的帮助

更新：

我对

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

---

对

html

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

您可以使用display:table或display:flex进行更改，为什么要使用jQuery？高度？我不熟悉显示器：桌子。我没有理由拒绝jquery。你确定吗？如果查看侧栏，link1和link2仍在页脚下。而且，两者在chrome和ie10中都给了我相同的外观，我可以看到link1和link2，没有任何问题，我在ie10中根本没有看到链接。请再核对一下。问题是看不见它，这是侧边栏的布局。有两种。它们位于页脚下。删除

位置：绝对用于页脚或使用纸条重新计算页脚顶部
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);