離子定製子標題覆蓋離子內容

我編輯了子標題樣式，以便它不是具有固定高度，而是其高度現在處於自動。我這樣做是爲了它可以容納它裏面的所有元素。離子定製子標題覆蓋離子內容

但是，這樣做後，內容是在我的較大的子標題後面。

在這topic，我認爲做的是重寫has-subheader和bar-subheader類。這是好嗎？如果該應用顯示在多個設備中，是否會出現問題？

這裏是一個示例代碼：

<ion-view> 
    <ion-header-bar class="bar-subheader" style="height: auto"> 
    <div> 
     123 
    </div> 
    <div> 
     456 
    </div> 
    <div class="button-bar"> 
     <a class="button">A</a> 
     <a class="button">B</a> 
     <a class="button">C</a> 
    </div> 
    </ion-header-bar> 

    <ion-content class="has-header has-subheader padding"> 
     <div style="font-size: 100px">HI !</div> 
    </ion-content> 
</ion-view>

這裏是什麼樣子：

enter image description here

來源

2014-10-07 Roj Beraña

您還可以添加填充頂到頁面上的離子含量。它會壓下標籤內的所有內容。

<ion-view> 
    <ion-header-bar class="bar-subheader" style="height: auto"> 
    <div> 
     123 
    </div> 
    <div> 
    456 
    </div> 
    <div class="button-bar"> 
    <a class="button">A</a> 
    <a class="button">B</a> 
    <a class="button">C</a> 
    </div> 
    </ion-header-bar> 

    <ion-content class="has-header has-subheader padding morePadding"> 
    <div style="font-size: 100px">HI !</div> 
    </ion-content> 
</ion-view> 

<style> 
.morePadding { 
    padding-top: *asmuchpaddingasyouneedhere* 
} 
</style>

來源

2014-11-12 14:13:17

離子定製子標題覆蓋離子內容

回答

相關問題