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

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

演示在演示中。

我的问题是它只在 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，但它们不是必要的