在基於離子的應用中無法設置離子含量內部的div高度

Question

我是離子的新手。 我試圖將2個div居中放置，而不考慮頁面上ion-content標簽內的ion-content 。 將高度設置為某個百分比值不起作用。 附加自定義centre類也不會影響div的位置。 它們仍然堆疊在一起，僅占用所需的空間。

以下是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>

CSS：

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

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

Answer 1

將height從％更改為vh（vh視口高度的1/100。）

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

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