jquery height() 返回 0 值

Question

我编写了一个小脚本，通过设置相邻 div 的顶部和底部填充来使 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:

<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>

它在这个 fiddle 中工作正常但不在我的live demo .在现场演示中，品牌和搜索的高度为 0；

Answer 1

在站点中将脚本从 $(window).load(function() { 移动到 $(document).ready(function() {