Question

我在Ionic框架方面取得了一些成功，但我在选项卡式视图中遇到了页眉/页脚格式问题。具体来说，我需要在页眉或页脚中呈现多行 - 我真的需要在那里放一张幻灯片和一些文本。我发现，基于所包含的内容而不是页眉/页脚是动态大小，我发现为每个页面/页脚分配的空间似乎是固定的。使用此选项卡视图的摘录，我看到页眉和页脚内容都被截断：

＆＃13;

<ion-view title="Bug tab">
  <ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">Header!</h1>
    <h2>more header</h2>
    <h2>more header</h2>
  </ion-header-bar>
  <ion-content has-header="true">
    <h2>Content<h2>
  </ion-content>
  <ion-footer-bar class="bar-subfooter" class="bar-assertive">
    <h1 class="title">Subfooter</h1>
    <h2>more subfooter</h2>
    <h2>more subfooter</h2>
  </ion-footer-bar>
  <ion-footer-bar align-title="left" class="bar-assertive">
    <h1 class="title">Footer</h1>
    <h2>more footer</h2>
    <h2>more footer</h2>
  </ion-footer-bar>
</ion-view>

＆＃13;

有解决这个问题的方法吗？有没有办法获得一个固定但动态大小的页眉/页脚区域，并且中间的其余内容可滚动？

（我对离子框架提出了问题，但网站拒绝了我的登录信息，并且始终如一地使用了<＃39;未知错误。

Answer 1

页眉/页脚的高度分别由.bar和.bar-footer类上的离子CSS设置。

你能做的是：

a）覆盖设置所需高度的.bar CSS类：

.bar{height: 80px; }

b）使用内联样式，在那里设置高度：

<ion-header-bar align-title="left" class="bar-positive" style="height: 80px;">

无论如何，我认为两种选择（固定高度）都是正确的方法，因为否则你将无法正确定位内容或子脚。

这里有一个固定高度的代码片段（注意“顶部”和“底部”CSS属性，以匹配新的条形高度。）

angular.module('starter', ['ionic'])

.bar{
  height: 80px !important;
}

.has-header{
	top: 80px !important;
	bottom: 160px !important;
}

.bar-footer{
	height: 100px !important;
}

.bar-subfooter{
	bottom: 100px !important;
	height: 60px !important;
}

<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet">

<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>



<body ng-app="starter">

<ion-view title="Bug tab">
  
  <ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">Header!</h1>
    <h2>more header</h2>
    <h2>more header</h2>
  </ion-header-bar>

  <ion-content has-header="true">
    <h2>Content</h2>
  </ion-content>

  <ion-footer-bar class="bar-subfooter" class="bar-assertive">
    <h1 class="title">Subfooter</h1>
    <h2>more subfooter</h2>
    <h2>more subfooter</h2>
  </ion-footer-bar>

  <ion-footer-bar align-title="left" class="bar-assertive">
    <h1 class="title">Footer</h1>
    <h2>more footer</h2>
    <h2>more footer</h2>
  </ion-footer-bar>
</ion-view>
  
 </body>

如果您想要根据内容动态扩展高度，您可以使用 min-content height属性，但在这种情况下，您不会在之前知道页眉，页脚和子脚的高度，您将无法在需要它的位置绝对div（内容和子脚）上设置正确的顶部/底部CSS，因此这些div的一部分将保持隐藏页眉和页脚元素。

检查以下代码段中的差异：

angular.module('starter', ['ionic'])

.bar{
	height: -moz-min-content !important;
  	height: -webkit-min-content !important;
  	height: min-content !important;
}

<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet">

<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>



<body ng-app="starter">

<ion-view title="Bug tab">
  
  <ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">Header!</h1>
    <h2>more header</h2>
    <h2>more header</h2>
  </ion-header-bar>

  <ion-content has-header="true">
    <h2>Content</h2>
  </ion-content>

  <ion-footer-bar class="bar-subfooter" class="bar-assertive">
    <h1 class="title">Subfooter</h1>
    <h2>more subfooter</h2>
    <h2>more subfooter</h2>
  </ion-footer-bar>

  <ion-footer-bar align-title="left" class="bar-assertive">
    <h1 class="title">Footer</h1>
    <h2>more footer</h2>
    <h2>more footer</h2>
  </ion-footer-bar>
</ion-view>
  
 </body>

Answer 2

我讨论的时间已经很晚了，但是我可以根据内容使用身高：自动在我的离子脚 - 杆上弯曲到任何高度。希望这有助于某人。

HTML：

<ion-footer-bar keyboard-attach class="item-input-inset bar-detail dynamic-height" ...

CSS：

.dynamic-height {
    height: auto;
}

Answer 3

如果离子头，离子脚的高度动态变化，则必须调用content.resize（）来更新Content的布局。

例如：

定义内容元素

@ViewChild(Content) content: Content;

然后在负责将数据填充到视图中的任何方法中使用

nextData() {
  this.content.resize();
}

如何在离子中获得动态大小的页眉/页脚？

3 个答案: