离子 bar-header 与离子含量重叠答案

【问题标题】：Ionic bar-header overlap with ion-content离子 bar-header 与离子含量重叠
【发布时间】：2014-12-09 22:39:24
【问题描述】：

我正在尝试添加栏标题和表单输入。但是用户名表单没有出现，可能是因为它与栏标题重叠。我在 ion-content 中添加了 class="has-header" 但这不起作用，并且用户名表单和 bar-header 仍然相互重叠。谁能帮帮我？

这是我的代码：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body>
    <div class="bar bar-header bar-calm">
                <h1 class="title">bar-calm</h1>
    </div>
    <ion-content class="has-header">
    <div class="list">          
        <label class="item item-input">
            <span class="input-label">Username</span>
            <input type="text">
        </label>
        <label class="item item-input">
            <span class="input-label">Password</span>
            <input type="password">
        </label>
        <label class="item item-input">
            <span class="input-label">Username</span>
            <input type="text">
        </label>
        <label class="item item-input">
            <span class="input-label">Password</span>
            <input type="password">
        </label>
     </div>
     </ion-content>
     <div class="bar bar-footer bar-calm">
        <div class="title">Footer</div>
     </div>`enter code here`
  </body>
</html>

【问题讨论】：

你能创建一个Codepen吗？我在那里添加了您的代码，并且标题没有与表单重叠。
虽然我使用的是codepen，但它是重叠的，这里codepen.io/anon/pen/ZYQqpO

标签： javascript html css angularjs ionic-framework

【解决方案1】：

问题是您自己没有创建 Angular 应用程序。

只需添加一个空应用：

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

    .controller('MapCtrl', function($scope) {


    });

http://codepen.io/anon/pen/ZYQqoe

【讨论】：