Firefox / Chrome 中的 jQuery 设置高度答案

【问题标题】：jQuery setting height in Firefox / ChromeFirefox / Chrome 中的 jQuery 设置高度
【发布时间】：2014-07-13 19:08:33
【问题描述】：

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

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

我想将左列的高度设置为内容的高度。

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

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

这在谷歌浏览器中效果很好。但在 Firefox 中，左栏的高度比在 Chrome 中高得多。因此，当它在 Chrome 中的高度为 300 像素时，在 Firefox 中大多为 600 - 900 像素（不知道为什么会变化）

是否有人对导致问题的原因以及如何解决问题有想法？

问候

【问题讨论】：

您是否有理由不想在 CSS 中执行此操作？将 javascript 用于 UI 目的不是一个好主意——如果有人关闭了 JS 怎么办？
我试过 height:100%;在 css 中，但这并不能很好地工作。我想每个父母也必须设置为100％？还是有更好的办法？
当然，父元素也需要有100%的高度。
但是比body正下方的父元素有视口的高度，如果没有内容和太多的空白，这也太大了

标签： jquery google-chrome firefox cross-browser

【解决方案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;
}

【讨论】：