Question

在这个site中，我有两列，我希望它们具有相同的高度。这是我的代码：

jQuery(document).ready(function($) {
    var Height = $("#per-wrapper").height();
    $('#per-side-column').css("min-height", Height);
});

但是，就像你在链接中看到的那样，主页或档案页面的高度不同，但在单页中是相同的。

我认为这可能是因为在jQuery之后渲染的一些视频或图像已经准备就绪。有人知道为什么吗？

Answer 1

我也遇到了同样的问题，我添加了内联脚本标记

<script>
    var Height = $("#per-wrapper").height();
    $('#per-side-column').css("min-height", Height);
</script>

在<section id = "#per-wrapper"></section>关闭代码后的页脚之前。这有助于在#per-wrapper加载并占用所需高度后获得高度。

Answer 2

如果您想使用javascript方法将左列的最小大小设置为右列的大小，则必须等到右列的内容已加载，这意味着您必须延迟设置min-高度。

使用setTimeout函数延迟调用函数。

setTimeout(function()
{
   var Height = $("#per-wrapper").height();
   $('#per-side-column').css("min-height", Height);
}, 1);

1是延迟的毫秒数。您需要调整此值以满足您的需求。