2015-09-29 3 views
0

У меня есть небольшой скрипт, написанный для центрирования содержимого DIV, установив Обивка Вверх & дно из соседнего DIV:высота JQuery() возвращают значение 0

$(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;

+3

Высота контейнера 'div' будет равна нулю до тех пор, пока загружается изображение. – dave

+2

Ваша скрипка работает onload, а ваша живая игра не – epascarello

+0

Да, я изменил свой код на загрузку окна вместо готового документа, и он отлично работает. за исключением того, что вы увидите прыжок Div на медленном соединении, пока он ждет загрузки изображений. –

ответ

0

в месте перемещения сценария от $(window).load(function() { к $(document).ready(function() {