Unable to set height of a div inside ion-content in ionic based application

Question

I am a newbie to ionic. I am trying to centre 2 divs regardless of the amount of content, inside an ion-content tag on a page. Setting height to some percentage value is not working. Attaching a custom centre class is also not affecting the position of the divs. They are still stacked on top of each other taking only the space required.

Below is HTML:

<ion-content class="padding tab-dash-content centre">
  <div class="section1 padding centre">
    <h3>Section 1</h2>
    <h5>
      Sub Heading
    </h5>
    <p>
      Some multi Line text
    </p>
  </div>      
  <div class="section2 padding centre">
    <h3>Section 2</h3>        
    <h5>
      Sub Heading
    </h5>
    <p>
      Some multi line text
    </p>
  </div>
</ion-content>

The CSS:

.centre { 
    float: none;
    margin-left: auto; 
    margin-right: auto; 
}

.section1,
.section2 {
    border: 2px solid #ffa733;
    height: 50%;
    width: 100%;
}

Answer 1

Change the height from % to vh (vh 1/100th of the height of the viewport.)

.centre { 
    float: none;
    margin-left: auto; 
    margin-right: auto; 
}

.section1,
.section2 {
    border: 2px solid #ffa733;
    height: 50vh;
    width: 100%;
    overflow: auto;
}