Question

我遇到跨浏览器兼容性问题。所以有一个网站有这样的结构：

<div id="content">
    <div id="left-collumn"></div>
    <div id="mid-collumn"></div>
</div>

我想将left-collumn的高度设置为内容的高度。

$(window).load(function() {
    setLeftHeight(content, left-collumn);
});

function setLeftHeight(elem, elem2) {
    var contentHeight = $(elem).height();
    $(elem2).height(contentHeight);
}

这适用于Google Chrome。但在Firefox中，左侧柱的高度比Chrome高得多。因此，当其在Chrome中的高度为300px时，其在Firefox中大多为600 - 900px（不知道为什么会有所不同）

有人知道导致问题的原因以及解决方法吗？

问候

Answer 1

这可以通过以下两种方式之一使用CSS来完成：

1：Demo

#content{
    display: table;
}
#left-collumn{
    background: #f00;
    display: table-cell;
    vertical-align: top;
}
#mid-collumn{
    background: #ff0;
    display: table-cell;
    vertical-align: top;
}

2：Demo

#content{
    overflow: hidden;
}
#left-collumn{
    background: #f00;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    float:left;
}
#mid-collumn{
    background: #ff0;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    float:left;
}

Firefox / Chrome中的jQuery设置高度

1 个答案: