Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/arduino/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Ionic framework 设置--离子5上的偏移顶部_Ionic Framework_Ionic5_Ion Content - Fatal编程技术网

Ionic framework 设置--离子5上的偏移顶部

Ionic framework 设置--离子5上的偏移顶部,ionic-framework,ionic5,ion-content,Ionic Framework,Ionic5,Ion Content,所以我有一个带有半透明离子标题和全屏离子内容的离子页面 问题是,当覆盖上面提到的离子内容时,CSS上的更改不会应用,并且在渲染后,默认样式会应用于离子内容 page.html <ion-content [fullscreen]="true"> <ion-grid fixed id="mainGrid"> <ion-row> <ion-col size="12"&g

所以我有一个带有半透明离子标题和全屏离子内容的离子页面

问题是,当覆盖上面提到的离子内容时,CSS上的更改不会应用,并且在渲染后,默认样式会应用于离子内容

page.html

<ion-content [fullscreen]="true">    
  <ion-grid fixed id="mainGrid">
    <ion-row>
      <ion-col size="12">
        <h1>Hola</h1>
        <h3>Eu ex ipsum anim voluptate dolor.</h3>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
以下是应用程序渲染后的标签:

<ion-header _ngcontent-uhx-c139="" class="ion-no-border primary md header-md header-translucent header-collapse-none header-translucent-md hydrated" ng-reflect-translucent="true" role="banner">...</ion-header>
<ion-content _ngcontent-uhx-c135="" style="--offset-top:56px; --offset-bottom:56px;" ng-reflect-fullscreen="true" class="md hydrated">...</ion-content>
。。。
...

在使用需要使用的偏移量时,在更高版本的iPhone中仔细测试——偏移量顶部:0!重要的;偏移量实际上是负数,因此如果您希望它位于半透明标题下,则需要56px。
<ion-header _ngcontent-uhx-c139="" class="ion-no-border primary md header-md header-translucent header-collapse-none header-translucent-md hydrated" ng-reflect-translucent="true" role="banner">...</ion-header>
<ion-content _ngcontent-uhx-c135="" style="--offset-top:56px; --offset-bottom:56px;" ng-reflect-fullscreen="true" class="md hydrated">...</ion-content>