屏幕的下半部分被导航栏

Question

我正在构建一个移动应用，遇到一个问题，我的屏幕底部被底部导航屏幕覆盖。

问题截图

我尝试添加一个保证金底部如下：

  .dashboard(style="margin-bottom: 58px; margin-top: -10px;")
    #region
    #menu-region

奇怪的是，如果我在桌面上运行代码但在手机上运行时无法正常工作，则可以正常工作。

问题：如何更新CSS以便它允许我在屏幕底部添加填充，以便屏幕的底部不会被移动设备上的导航栏覆盖？

底栏的CSS

.bottombar {
  background-color: $theme-color;
  height: 58px;
  width: 100%;
  position: fixed;
  bottom: 0px;
  z-index: 1000;

  .footer-icon {
    padding-top: 17px;
    text-align: center;
    width: 20%;
  }

  table {
    width:100%;
    height: 100%;
    border: 0px;
    padding: 0px;
    border-spacing: 0px;
    background-color: transparent;

    tr {
      td {
        width:20%;
        background-color: transparent;
        text-align: center;
        position: relative;
      }
      .menu-corner-color {
        background-color: #1189b6;
      }
      .menu-side-color {
        background-color: #006990;
      }
      .menu-middle-color {
        background-color: #004965;
      }
      .circle {

      }
    }
  }
}

Jade for layout

.footermenu
  .bottombar
    table(style="width:100%; height: 100%; border: 0px; padding: 0px; border-spacing: 0px; background-color: ")
      tr
        td.notifications.menu-corner-color
          i.material-icons.md-light.md-24 
          span.badge_count.hide
        td.coach_chat.menu-side-color
          i.material-icons.md-light.md-24 
          span.badge_count.hide
        td.log.menu-middle-color
          i.material-icons.md-light.md-24 
        td.community.menu-side-color
          i.material-icons.md-light.md-24 
          span.badge_count.hide
        td.profile.menu-corner-color
          i.material-icons.md-light.md-24 