内容位于Ionic-Header栏上方

Question

我使用Ionic-Header栏来满足我的需要。我调整了工具栏的样式，如下所示：

.bar.bar-positive {
  background: #00D7FF;
  border: none !important;
}

我现在在我的内容中有一个图像，它有时会变得非常大和高，导致它与我的离子标题栏重叠。图像的样式如下：

<img ng-src="{{imageDataViewer.currentCID}}" ng-show="currentCID" class="image-viewer">

.image-viewer {
  width: 100vw;
  max-width: initial;
  max-height: auto;
}

处理这个问题的方法是什么？我正在尝试用图片填充内容。

http://ionicframework.com/docs/api/directive/ionHeaderBar/

Answer 1

您可以像<ion-content class="has-header">那样定义离子内容，has-header类是一个标准离子类

然后，您的图像将被放入DOM，并且不会覆盖headeR。

Answer 2

在图像查看器类中将max-width和max-height固定为某个值