jquery height（）返回0值

我编写了一个小脚本，通过设置相邻div的padding top&bottom，将div的内容居中：

$(document).ready(function() {
    $('.index-block:first').css({
        'padding-top': (($(window).height() - $('.cta').height()) / 4) - $('footer').height()  + "px",
        'padding-bottom': (($(window).height() - $('.cta').height()) / 4) - $('footer').height()  + "px"
    });
    $('.search').css({
        'padding-top': ($('.brand').height() - $('.search').height()) / 4 + "px",
        'padding-bottom': ($('.brand').height() - $('.search').height()) / 4 + "px"
    });
    alert('brand: ' + $('.brand').height() + ' | search: ' + $('.search').height());
});

html:

---

它在这种情况下工作正常，但在我的电脑中不起作用。在现场演示中，品牌和搜索的高度为0

站点内将脚本从$window.loadfunction{移动到$document.readyfunction{

在图像加载之前，容器div的高度将为零。你的小提琴在加载时运行，而你的live没有。我将代码改为window load，而不是document ready，它工作正常。只是你会看到div在等待图像加载时在慢速连接上跳转。

<div class="index-block cta row">
    <div class="col-md-4 brand">
        <img src="/static/images/logo.png" alt="<!-- TMPL_VAR instance_name -->" />
    </div>
    <div class="col-md-8 search">
        <h1>Property Experts<br><small>Neighborhood Enthusiasts</small></h1>
        <hr>
        <search-form></search-form>
        <div class="button-group">
            <a class="btn btn-primary" href="/leads/buy"><span>Buying a home?</span></a>
            <a class="btn btn-primary" href="/leads/sell"><span>Selling a home?</span></a>
            <a class="btn btn-primary" href="/leads/cma"><span>What's my home worth?</span></a>
        </div>
    </div>
</div>