Google Material Design и Infinite Scroll

Question

Итак, после долгого устранения неполадок, я наконец выяснил, почему бесконечный свиток не работал (http://infiniteajaxscroll.com/examples/masonry.html).

Я использую дизайн материала Google для сайта (показано ниже).

Бесконечный свиток работает просто отлично сам по себе. Однако, когда он находится внутри дизайна материала Google, он просто не работает.

Кто-нибудь, что я могу сделать по этому поводу?

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer"> 
<header class="mdl-layout__header"> 
    Head 
</head> 
<main class="mdl-layout__content"> 
    <div class="rfp_hide" id="rhm_post_show"> 
     <?php 
     if (get_query_var('paged')) { 
      $paged = get_query_var('paged'); 
     } elseif (get_query_var('page')) { 
      $paged = get_query_var('page'); 
     } else { 
      $paged = 1; 
     } 
     $args = array(    
      'paged'=>$paged, 
      'posts_per_page' => 5,    
      'orderby' => 'date',    
      'order' => 'DESC' 
      ); 
     $loop = new WP_Query($args); 
     global $post, $paged; 
     while ($loop->have_posts()) : $loop->the_post(); 
     ?> 
     <div class="rhm_post_container"> 
      Post 
     </div> 
     <?php endwhile; ?> 
     <?php wp_reset_postdata(); ?>  
    </div> 
    <nav id="rh_nav_below"> 
     <ul> 
      <li class="rh_nav_previous"><?php previous_posts_link('&laquo; PREV', $loop->max_num_pages) ?></li> 
      <li class="rh_nav_next"><?php next_posts_link('NEXT &raquo;', $loop->max_num_pages) ?></li> 
     </ul> 
    </nav> 
</main> 
</div> 


<script> 
var container = document.querySelector('#rhm_post_show'); 
var msnry = new Masonry(container, { 
    // options 
    itemSelector: '.rhm_post_container', 
    gutter: 10 
}); 

var ias = $.ias({ 
    container: '#rhm_post_show', 
    item:  '.rhm_post_container', 
    pagination: '#rh_nav_below', 
    next:  '.rh_nav_next a', 
    delay: 100 
}); 

ias.on('render', function(items) { 
    $(items).css({ opacity: 0 }); 
}); 

ias.on('rendered', function(items) { 
    msnry.appended(items); 
}); 

ias.extension(new IASSpinnerExtension()); 
ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'})); 
</script> 

Answer 1

Конструкция материалов блокирует высоту главных оберток до 100%;

.mdl-layout__container .mdl-js-layout 

это избежать кладки, чтобы загрузить другие элементы

так в пользовательском CSS дополнения:

.mdl-layout__container, .mdl-js-layout{ 
    height: auto; 
} 

Это решало вопрос с моей стороны