【发布时间】：2016-01-26 11:41:31
【问题描述】：
我有一个包含 3 个标签的索引页。该问题出现在所有选项卡中，但我将在此处显示主页。出现的问题是主页的一些顶部内容被标题栏和标签栏重叠，因此被隐藏了。
在主页 html 页面中，我尝试使用 ion-content 将代码包装在下面（请参阅下面的代码），但这会隐藏顶部内容，挤压高度并且不再是全屏，另外对于幻灯片，我必须在内容上滑动，因为如果我触摸一些填充或边距空间，它将不再滑动（幻灯片 3 是一个很好的例子，因为它没有很多内容，你必须按下并滑动在文本上滑动）。如果我删除 ion-content 标签，这会正确调整高度，使滑动工作，所以我不必滑动内容就可以工作，但顶部内容被选项卡和标题栏重叠的问题仍然存在。如何将 home.html 完美地放在选项卡下并利用所有空间？
Index.html
<!DOCTYPE html>
<html>
<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">
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- ngCordova install script needed -->
<script src="lib/ngCordova/dist/ng-cordova.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>
</head>
<body ng-app="mobileApp">
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab icon="ion-home-outline" ui-sref="tabs.Home">
<ion-nav-view name="Home-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-info-outline" ui-sref="tabs.Info">
<ion-nav-view name="Info-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-system-outline" ui-sref="tabs.System">
<ion-nav-view name="System-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-calm">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
<ion-view hide-back-button="true">
<ion-nav-title>
<h1>TitleHere</h1>
</ion-nav-title>
</ion-view>
</ion-nav-view>
</body>
</html>
home.html
<ion-content>
<div class="item item-checkbox">
Checkbox Label
<label class="checkbox">
<input type="checkbox">
</label>
</div>
<ion-slide-box>
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="http://code.ionicframework.com/assets/img/app_icon.png">
</div>
<p>
We've worked super hard to make you happy.
</p>
<p>
But if you are angry, too bad.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p>
Too bad!
</p>
</ion-slide>
</ion-slide-box>
<div class="bar bar-footer bar-balanced" >
<div class="title">Footer</div>
</div>
</ion-content>
【问题讨论】：
-
添加一些屏幕截图有助于使问题更清晰。
-
@BenSmith 请查看更新。
标签： android html css ionic-framework ionic