离子定制的子标题覆盖离子含量

Question

我编辑了子标题样式，因此它的高度不是固定高度，而是高度。 我这样做是为了能够容纳其中的所有元素。

然而，在执行此操作时，内容位于我较大的子标题后面。

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

这是它的样子：

Answer 1

您还可以在该页面上的离子内容中添加填充顶部。 它会压低标签内的所有内容。

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