CSS with IONIC screen height ISSUE

[7773783]

hi,
when i put the down div i want it to be exactly the size left off in screen.
the problem is that it takes it 56px down - exactly the size of the top navbar.
so when i do the height: calc((100vh/3)*2); it gives whats in pic;
and i cant manage to make: height: calc((100vh/3)*2-56px);

any idea of how to make it right?

i know i have too many div’s and row’s after i figure it out i will delete them;

here is my code:

  <ion-grid class="grid">
        <ion-row class="upperRow">
            <ion-row class="transparentClockLine">
            <ion-label class="clock">{{ time }}</ion-label>
            </ion-row>

            <ion-row class="profile">
                    <div class="profileCircle">
                      <div class="profileMan"></div>
                  </div>
                <ion-label id="dokoLabel">DOKOPOINT LTD</ion-label>
                <ion-label id="dokoSubLabel">Smart ERP SYSTEM</ion-label>
            </ion-row>
            </ion-row>
          <ion-row class="bottomRow">
            <div class="bottomMainDiv">
            <ion-row class="bottomSplitter">
                adasdasd
            </ion-row>
          </div>
          </ion-row>
        </ion-grid>

.upperRow{
  // height: 41%;
  background: url("../assets/img/homePage/upperBG.png") no-repeat ;
  background-size: cover;
  position: relative;
  height: calc(100vh/3);
  background-position: center 0;
  width: 100%;
  z-index: 2;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

.bottomRow{
  // height: 59%;
  // top: 41%;
  background: url("../assets/img/homePage/homeBG.png") no-repeat center fixed;
   background-size: cover;
  position: relative;
  // height: 100%;
  // background-position: center 0;
  width: 100%;
  height: calc(((100vh/3)*2));
  z-index: 1
}
// this is the pink border
.bottomMainDiv{
  border: 1px pink solid;
}