离子定制子标题覆盖离子内容

问题描述：

我编辑了子标题样式，以便它不是具有固定高度，而是其高度现在处于自动。我这样做是为了它可以容纳它里面的所有元素。离子定制子标题覆盖离子内容

但是，这样做后，内容是在我的较大的子标题后面。

在这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

答

您还可以添加填充顶到页面上的离子含量。它会压下标签内的所有内容。

<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>

离子定制子标题覆盖离子内容

相关推荐