正确设置离子滚动视口高度-Java 学习之路

首先，这是截图显示我已实现的内容 .

app screenshot

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

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

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

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

以下是我使用的风格 .

.header {
    height: 24vh;

    ion-scroll {
        height: 58vh;
    }
}

Update

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

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

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>

然后，我为 Headers 设置了一个固定的高度 .

.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%;
    }
}

回复于 2024-04-26T19:57:05+08:00

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

1 回答

相关问题