小屏幕上的CSS底部属性问题

Question

这是CSS。问题是，当屏幕位于1366x768时，div没有粘在底部的navbar上。

还有其他方法可以替换bottom属性吗？

.Newmealpopout {
  position: fixed;
  left: inherit;
  bottom: 56px;
  height: 220px;
  padding: 6px;
  background-color: #9e9e9e;
  color: #333;
}

<div class="col-xs-3 col-md-2 col-lg-3 mts-padding-all-15 mts-border-right text-center" style="">
  <span style="margin-left:-3px; color: black!important;  text-shadow: 0px 0px 0px ;">Meal</span> &nbsp;<a href="javascript:$(&#39;#pnlmealNew&#39;).slideToggle(&#39;fast&#39;);" onclick="fntToggleHotelList(event);" class="meal-toggle tourdetail-ttp mts-hypl mts-text-12"
    data-toggle="tooltip" title="" data-original-title="View Meals"><i class="fa fa-lg fa-info-circle"></i></a>
  <br>

  <div class="row">
    <div id="pnlmealNew" class="col-xs-3 col-md-2 col-lg-3  Newmealpopout mts-padding-top-10 mts-padding-side-10" style="display: none;">
    </div>
  </div>

您可以参考屏幕截图以获取参考