我在Ionic应用程序中遇到嵌套视图的问题 . 我有一个自定义标签导航，放在我的父离子视图中 . 选项卡导航旨在与内容一起滚动，内容位于下方的离子导航视图中 . 为此，我将 scroll="false" 放在孩子的离子含量上 .
The problem is, that my content won't expand the parent's height to fit the content's height . 它的高度为100％，固定在视图的初始高度 . 因此，在页面的末尾有剩余的内容，永远不会显示 . 这是模板代码（对不起，我不能提供一个plunkr示例）：
<ion-view>
<ion-content on-swipe-left="tabs.goToNext()" on-swipe-right="tabs.goToPrevious()">
<div class="tabbed-slidebox">
<div class="tsb-icons">
<div class="tsb-ic-wrp" style="">
<a href="#/app/claims/creation/step-what" ng-class="{active: tabs.activeTab === 'Was'}">Was</a>
<a href="#/app/claims/creation/step-who" ng-class="{active: tabs.activeTab === 'Wer'}">Wer</a>
<a href="#/app/claims/creation/step-where" ng-class="{active: tabs.activeTab === 'Wo'}">Wo</a>
<a href="#/app/claims/creation/step-when" ng-class="{active: tabs.activeTab === 'Wann'}">Wann</a>
</div>
</div>
</div>
<ion-nav-view name="stepContent">
<!-- For illustration I copied ion-view from the template which will be rendered into this ion-nav-view -->
<ion-view view-title="Schadenmeldung">
<ion-content class="step step-what padding" scroll="false">
<!-- CONTENT -->
</ion-content>
</ion-view>
</ion-nav-view>
</ion-content>
<div class="fab-sticky">
<!-- some sticky button here -->
</div>
</ion-view>
我的视图层次结构看起来像这样：
-
app view （主要是离子导航条）
-
tabs view （主要是标签导航）
-
content view （旨在扩展离子视图高度的内容）
（如果有帮助，我可以提供状态配置）
我已经玩过很多CSS了 . 但由于我不是CSS Mastermind，我没有找到解决方案 . 这个问题似乎来自于离子导航视图的 position: absolute . 它可以防止高度适应内容 .
有人可以帮忙吗？
1 回答
你可以在ion-nav-view中添加样式，例如：
<ion-nav-view name="stepContent" style="height: 380px"></ion-nav-view>