我有一个包含 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>
具有 ion-content 。顶部的复选框是隐藏的，页脚不在底部，只有当我按住并在内容上滑动而不是在空白区域上滑动时，滑动才有效。
如果我去除 ion-content 。页脚到底部，我可以在白色的任何地方滑动，它会滑动，但复选框仍然被标题栏和选项卡隐藏。
最佳答案
我之前第一次尝试Ionic的时候遇到过这个问题。浪费了很多时间来解决这个问题。 您的某些顶部内容将被重叠，因为 ion-tabs 优先级高于后面的内容。
我把页脚放在 <ion-content> 外面标签。我放置了一些类，例如 has-tabs-top和 has-footer .
试试这个，让我知道它是否可以帮助你。 http://codepen.io/nampdn/pen/qOKNNv
HTML
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="has-tabs-top has-footer" scroll="false">
<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>
</ion-content>
<div class="bar bar-footer bar-balanced">
<div class="title">Footer</div>
</div>
</ion-view>
</script>
<script id="templates/facts.html" type="text/ng-template">
<ion-view view-title="Facts">
<ion-content class="padding">
<p>Banging your head against a wall uses 150 calories an hour.</p>
<p>Dogs have four toes on their hind feet, and five on their front feet.</p>
<p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
<p>A cockroach will live nine days without it's head, before it starves to death.</p>
<p>Polar bears are left handed.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts2.html" type="text/ng-template">
<ion-view view-title="Also Factual">
<ion-content class="padding">
<p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
<p>1 in every 4 Americans has appeared on T.V.</p>
<p>11% of the world is left-handed.</p>
<p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
<p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
<p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
<p>Built with Sass and optimized for AngularJS.</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/contact.html" type="text/ng-template">
<ion-view title="Contact">
<ion-content>
<div class="list">
<div class="item">
@IonicFramework
</div>
<div class="item">
@DriftyTeam
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
关于android - 内容被 Ionic 中的标题和标签隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33361585/