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

Question

我是離子型的新手。我試圖在一個頁面上的ion-content標記內，不管內容的多少，都將2個div分爲中心。將高度設置爲某個百分比值不起作用。附加一個自定義類centre也不影響divs的位置。它們仍然堆疊在一起，只佔用所需的空間。

下面是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：（VH 1/1/100視口的高度的）

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

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

Answer 1

變化從％的height到VH

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

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