Question

我们有一个以表格形式显示在我们网站上的项目列表。根据列表中显示的项目数量，表格的高度将发生变化（项目数量会根据星期几而变化）。在此列表的左侧有一个垂直条，应根据每天所有表的大小调整大小。

这是我们正在使用的HTML：

<div class="tv_guide">
        <div class="shows_bar_title"></div>
        <div class="tv_guide_contents">
            <!--The contents are generated dynamically with a PHP loop-->
            <div class="guide_slot">
               <!-- one guide_slot per item -->
            </div>
        </div>
        <div class="clearFloat"></div>
</div>

所以基本上我们使用jQuery检查.tv_guide_contents的CSS高度，然后使用该值设置.shows_bar_title的高度。

var playlistHeight = $('.tv_guide_contents').css('height');
$('.shows_bar_title').css('height', playlistHeight);

问题是在Chrome中，playlistHeight的值高于实际值。例如，如果tv_guide_contents的高度为1932px，则playlistHeight的值显示为2012px，因此标题栏更高。但是，如果我转到Chrome控制台并输入

$('.tv_guide_contents').css('height');

我得到了1932px。它还在框模型视图中显示了1932年。

为什么在设置playlistHeight变量时获得更高的值？这不会发生在Firefox上，标题栏在那里正确调整大小。

感谢您的帮助。

Answer 1

也许你在加载所有页面内容后sholud执行脚本。使用.load()函数执行此操作：

 $(window).load(function() {
    var playlistHeight = $('.tv_guide_contents').css('height');
    $('.shows_bar_title').css('height', playlistHeight);
 });

JQuery CSS高度设置无法在Chrome / Safari

1 个答案: