Question

我有一个包含两列的页面并尝试使用jQuery使它们具有相同的高度...我有以下代码

<script type="text/javascript"> 
$(document).ready(function() {
        var right_column_height = $("#right-column-wrapper").height()
        var content_height = $("#content-wrapper").height()
        console.log("content = " + content_height)

        if(right_column_height > content_height) $("#content-wrapper").css("height", right_column_height)
        else $("#right-column-wrapper").css("height", content_height)
})
</script>

如果右列更高，它的工作正常，但是当内容更高时，它表现得很奇怪...... 在一个页面上高度按预期设置，在其他页面上它根本不起作用... 我添加了控制台日志记录以查看发生了什么，我看到内容高度不是在jQuery中计算的...但是当我输入相同的代码到控制台时，我得到一个相关值...... 你能否在我的代码中提出错误的建议......

请参阅http://demo.romanpriryl.cz上的演示，问题页面为http://beta.romanprikryl.cz/fotogalerie.htm，但在http://beta.romanprikryl.cz/objednavky.htm上正常工作

Answer 1

当我将用于调整大小的代码放入setTimeout函数时，我已经解决了我的问题... 延迟1毫秒就足够了，但我仍然不明白为什么它不能正常工作...可能在文件准备好后以某种方式计算页面高度

Answer 2

为什么使用javascript来解决使用CSS轻松修复的问题？

例如，请参阅this tutorial和this one as well

Answer 3

如果＃right-column-wrapper或＃content-wrapper元素的图像没有指定尺寸，则jQuery将返回容器的高度减去此图像高度。

这是因为图像尚未加载到$（document）.ready（）上（这也是setTimeout工作的最可能原因）。

要解决这个问题，请将代码放在$（window）.load（）中要获取元素高度的位置。

e.g。

$(window).load(function() {
    var right_column_height = $("#right-column-wrapper").height()
    var content_height = $("#content-wrapper").height()
    console.log("content = " + content_height)

    if(right_column_height > content_height) $("#content-wrapper").css("height", right_column_height)
    else $("#right-column-wrapper").css("height", content_height)
});

或者，您可以在HTML中设置图像宽度和高度，jQuery将确定元素的正确高度值。

不正确的jQuery高度

3 个答案: