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() {

jquery height（）返回0值

1 个答案: