正确设置离子滚动视口高度

Question

首先，这是截图，显示我已实施的内容。

如您所见，有3个主要部分 - 标题，可滚动部分和标签栏。我设法禁用了ion-content的滚动：

ion-content.no-scroll {
    > .scroll-content {
        overflow: hidden !important;
    }
}

现在我已将标题的高度设置为24vh，将ion-scroll元素的高度设置为58vh。我通过反复试验获得了这些值，最终给出了一个可接受的结果，如截图所示。

我想问的是如何设置ion-scroll元素的高度，而不是相对于视口高度进行硬编码。我尝试使用height: 100%，但它根本不起作用。

以下是我正在使用的风格。

.header {
    height: 24vh;

    ion-scroll {
        height: 58vh;
    }
}

更新

事实证明，我的目标可以通过使用谢尔盖建议的ion-header和ion-content来实现。只需将缩略图，用户名和ion-segment放在ion-header内，ion-content中的项目列表将照常生成我想要的内容。

如果出于任何原因，您无法使用ion-header来保存这些内容，请参阅下面的答案。

Answer 1

最后使其与flex一起使用，并删除了那些硬编码的height属性。

添加根容器以将所有内容包含在ion-content下。

.root-container {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
}

<ion-content>
    <!-- extra container holding all contents -->
    <div class="root-container">
        <!-- fixed-height header -->
        <div class="header">...</div>

        <!-- built in Ionic 3 segment buttons -->
        <ion-segment>...</ion-segment>

        <!-- wrap ion-scroll up -->
        <div class="scroll-container">
            <ion-scroll>...</ion-scroll>
        </div>
    </div>
</ion-content>

然后，我为标题设置了一个固定的高度。

.header {
    flex: 0 0 150px;
    width: 100%;
}

阻止ion-segment成长或缩小。

ion-segment {
    flex: 0 0 auto;
}

最重要的是，添加一个容器来包裹ion-scroll。

.scroll-container {
    flex: 1 1 100%;

    ion-scroll {
        width: 100%;
        height: 100%;
    }
}