JQuery CSS 高度设置在 Chrome/Safari 上不起作用答案

【问题标题】：JQuery CSS Height setting not working on Chrome/SafariJQuery CSS 高度设置在 Chrome/Safari 上不起作用
【发布时间】：2016-07-17 16:51:37
【问题描述】：

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

这是我们正在使用的 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');

我确实得到了 1932 像素。它还在盒子模型视图中显示 1932。

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

感谢您的帮助。

【问题讨论】：

标签： jquery css ipad

【解决方案1】：

也许你应该在加载所有页面内容后执行脚本。使用.load() 函数来做到这一点：

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

【讨论】：

工作就像一个魅力。谢谢！