jquery在加载后设置高度

Posted 2023-02-21

【中文标题】jquery在加载后设置高度

【英文标题】：jquery set height AFTER load

【发布时间】：2011-03-30 11:01:55

【问题描述】：

我在设置动态加载的元素的高度时遇到了一点问题。

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

我希望有人可以理解，我意识到这有点令人费解。

这是我的点击代码：

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%'); 
      
   );

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

【问题讨论】：

为什么不使用 jQuery 的 $ 快​​捷方式？ $('#cbox') 比 jQuery('#cbox') 短很多；)

@Znarkus 可能会导致与其他库发生冲突。我知道某个烦人的 CMS 使用了可怕的自定义 jQuery 版本。

可能与 jquery 一起使用不同的库

一开始我使用 jQuery，因为这是在 Wordpress 的上下文中，这是必要的。

你可以这样做：(function($) $('#cbox'); )(jQuery); 在函数中编写所有代码，使用$。

【参考方案1】：

使用加载回调。

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

【参考方案2】：

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

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

【讨论】：

大声笑，我走神了，我会打败你们俩的：无论如何都要为你们投票：P

谢谢你们俩！ :) 如果我想将高度设置为该 div，这很有效。但是现在我发现如果内容高度比窗口高，我只想将它设置为那个 div 高度。否则我希望它设置为 100%。我尝试将您的代码稍微修改为此（onlick 事件）： jQuery('#cbox').load('', function() if (jQuery('#cbox').height ()