Question

我在Ionic应用程序中遇到嵌套视图的问题。我有一个自定义标签导航放在我的父离子视图中。选项卡导航旨在与内容一起滚动，内容位于下方的离子导航视图中。为此，我将scroll="false"放在孩子的离子内容上。

问题是，我的内容不会扩展父级的高度以适应内容的高度。它的高度为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>

See a demo here

我的视图层次结构看起来像这样：

应用视图（主要是离子导航栏）
- 标签视图（主要是标签导航）
  - 内容视图（旨在扩展离子视图高度的内容）

（如果有帮助，我可以提供状态配置）

我已经玩过很多CSS了。但由于我不是CSS Mastermind，我没有找到解决方案。问题似乎来自离子导航视图的position: absolute。它可以防止身高适应内容。

有人可以帮忙吗？

Answer 1

您可以在ion-nav-view中添加样式例如： <ion-nav-view name="stepContent" style="height: 380px"></ion-nav-view>

离子视图高度与内容高度不匹配

1 个答案: