html - ionic header 隐藏内容尽管类 "has-header"

Question

在带有 Ionic 和 AngularJs 的应用程序上，我尝试创建一个带有标题的新模板。不幸的是，标题隐藏了一些内容。

这是我的代码:

<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"/>
<div class="bar bar-header bar-stable">
  <h1 class="title">XXX</h1>
</div>
<ion-content class="has-header">
  <div class="padding-horizontal">
    <h4 class="center">Sign in</h4>
    <button class="button button-block button-positive">Sign In</button>
  </div>
  <hr>
  <div class="padding-horizontal">
    <h4 class="center">Don't have an account?</h4>
    <button class="button button-block button-positive">Sign Up</button>
  </div>
</ion-content>

或者 JsFiddle:http://jsfiddle.net/cyef9sxs/1/

谢谢!

Answer 1

那么您需要指定 ionic 元素的绝对位置和宽度。

.has-header {
  top: 44px;
  position:absolute;
  width: 100%;
}