尽管 class "has-header" Ionic header 隐藏内容

Question

在带有 Ionic 和 AngularJs 的应用程序上，我尝试创建一个带有 header 的新模板。不幸的是，某些内容被 header.

隐藏了

这是我的代码：

<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

那么你需要指定离子元素的绝对位置和宽度。

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

尽管 class "has-header" Ionic header 隐藏内容

Ionic header hide content despite class "has-header"

html

css

ionic