Javascript 将20px高度添加到可变高度邮件容器

我使用的javascript与Pinterest使用的javascript类似，它创建具有相同间距的可变高度div。我遇到的问题是，MobileView中最后一个div的底部边距比应该的短20像素。我发现，如果我检查元素并将20px添加到容纳所有立柱的容器的高度，它看起来应该是这样的。我只是不确定如何在代码本身中做到这一点，因为它是通过javascript应用的计算高度

以下是HTML：

<div id="post-container" class="grid_4_desktop grid_4_tablet grid_1_mobile">
        <?php 
            if($year !==''){
        ?>
        {exp:channel:entries channel="news_articles" start_on="<?php echo $year-1;?>-12-31 00:01" stop_before="<?php echo $year;?>-12-31 00:01" orderby="date"  sort"desc" }
        <?php 
            }else{
        ?>
        {exp:channel:entries channel="news_articles" orderby="date" sort"desc" limit="15"}
        <?php
            }
        ?>

        <div class="post">
             <a href="{path=news/article/{url_title}}?year={entry_date format='%Y'}">
                 {if article_thumb!=''}
                    <img width="216" height="143" title="Meeting" src="{article_thumb}" />
                 {/if}
            </a>
            <div class="inner small">
                <p class="date">{entry_date format="%D %F %d, %Y"}</p>
                <h3 class="title">
                    <a href="{path=news/article/{url_title}}?year={entry_date format='%Y'}">{article_title}</a>
                </h3>
                <p>{exp:ce_str:ing truncate='120|...<br /><a href="{path=news/article/{url_title}}?year={entry_date format='%Y'}">Read More</a>'}{article_content}{/exp:ce_str:ing}</p>


                <div class="social clearfix">
                    <a href="javascript:createFacebookLink('{current_url}','<?php shuffle($fbShareTxt); echo $fbShareTxt[0];?>', '{article_title}', '{site_url}_img/_layout/logo_orange_200x200.png');" class="icon facebook"></a>
                    <a href="javascript:createTwitterLink('{current_url}','<?php shuffle($fbShareTxt); echo $fbShareTxt[0];?>');"class="icon twitter"></a>
                </div>
            </div>
        </div>
        {/exp:channel:entries}
    </div><!-- end post-container -->

{exp:channel:entries channel=“news_articles”start_on=“-12-31 00:01”stop_before=“-12-31 00:01”orderby=“date”sort“desc”}
{exp:channel:entries channel=“news\u articles”orderby=“date”sort“desc”limit=“15”}
{entry\u date format=“%D%F%D，%Y”}
{exp:ce_str:ing truncate='120 |…
'}{article_content}{/exp:ce_str:ing}

{/exp:channel:entries}

以及设置高度的脚本：

function setNewsGrid(columns,columnWidth,offset){
      $('#post-container').show();
            var item, top, left, i=0, plength=$('#post-container .post').length, cHeight=0;
            for(; i<plength; i++ ) {
              item = $('#post-container .post:eq('+i+')');
              var t = 0;
              if(i-columns > -1){
                t =  $('#post-container .post:eq('+(i-columns)+')').outerHeight() +  $('#post-container .post:eq('+(i-columns)+')').position().top +offset;
              }
              // Postion the item.
              item.css({
                position: 'absolute',
                top: t,
                left: (((i%columns)*columnWidth) + ((i%columns)*offset))+'px'
              });
              if(t+item.outerHeight() > cHeight)cHeight=t+item.outerHeight();
            }
          $('#post-container').css('height',cHeight);
      }

函数setNewsGrid（列、列宽、偏移量）{
$（'#post container'）.show（）；
变量项，顶部，左侧，i=0，正压=$（“#post container.post”）。长度，cHeight=0；
对于（；i-1）{
t=$（'#post container.post:eq（+（i-columns）+'））.outerHeight（）++$（'#post container.post:eq（+（i-columns）+'））.position（）.top+offset；
}
//发布该项目。
item.css({
位置：'绝对'，
上图：t，
左：（（i%列）*列宽）+（i%列）*偏移量）+'px'
});
如果（t+item.outerHeight（）>cHeight）cHeight=t+item.outerHeight（）；
}
$（'#post container'）.css（'height'，cHeight）；
}

---

基本上，我只想在生成的高度上加上20px，这样底部边距就不会切断最终的div。

我想出来了，我只是改变了这一行：

if(t+item.outerHeight() > cHeight)cHeight=t+item.outerHeight();

为此：

if(t+item.outerHeight() > cHeight)cHeight=t+20+item.outerHeight();

---

现在，它的工作方式和它应该的完全一样。

当询问JavaScript时，请发布HTML，而不是服务器端代码。无论如何，我想CSS修复是一种更好的方法。也许是包装器元素溢出？谢谢你的建议，我已经尝试了所有我能想到的关于包装器的方法，但没有成功。我能让它正确显示的唯一方法是去掉20px的边距，或者手动将20px添加到包装器的高度。