jquery 设置加载后的高度

Question

我在设置动态加载的元素的高度时遇到了一些麻烦。

我使用 jquery load 函数将外部（动态）页面加载到当前页面上的 div (#cbox) 中。因为这个子页面是动态的，所以我无法事先知道内容的高度是多少。我想在加载内容后获取高度，并将容器 div 的高度设置为匹配，以便我的颜色背景 css 一直向下。我仅在CSS中尝试了许多100％高度div的变体，但是一旦我滚动页面，颜色就会向上滚动（100％似乎只设置浏览器窗口高度的100％，并且b/c内容是动态的我的解决方案是将 div 的高度设置为加载内容的高度，但这仅适用于第二次单击（因为此时页面已加载并可访问。我需要弄清楚什么）如何做是在外部页面加载后更改 div 的高度，但我似乎无法弄清楚）

我希望这对某人来说是可以理解的，我意识到这是

我的 onclick 。代码：

jQuery('#cbox').load('externalpage.php');
jQuery('#cbox').height(jQuery('#content').height());

---

更新： 如果我想设置该 div 的高度，下面的解决方案有效。但现在我发现我只想将其设置为 div 高度，如果内容高度比窗口高。否则我希望将其设置为 100%。我尝试稍微修改他们的代码（onlick 事件）：

jQuery('#cbox').load('<?php the_permalink(); ?>', function() 
   { 
      if (jQuery('#cbox').height() < jQuery('#content').height()) 
      {
         jQuery('#cbox').height(jQuery('#content').height()); 
      } 
      else
      { 
         jQuery('#cbox').height('100%'); 
      }
   });

但它不起作用......有什么想法吗？

Answer 1

内容加载后需要调用回调函数。

jQuery('#cbox').load('externalpage.php', function() {
   jQuery('#cbox').height(jQuery('#content').height());
});

Answer 2

使用加载回调。

jQuery('#cbox').load('externalpage.php', function() {
  jQuery('#cbox').height(jQuery('#content').height());
});