容器div无法适应子Angular组件的高度

Question

我有以下离子应用程序example in Stackblitz。您会看到有一个名为<my-video></my-video>的自定义Angular组件，一个ion-list和一个按钮。我想要的是：

• 将ion-list放在视频顶部。这样，ion-list与视频重叠。
• 将按钮置于视频下方。

这就是我现在所拥有的，您可以在Stackblitz示例中看到代码（包括CSS代码）：

我认为问题可能在于video-container与其子my-video的高度不同，但我不知道为什么。

我尝试使用不同的定位配置（位置relative，absolute，static等）无效。实现此目标的正确方法是什么？

Answer 1

我认为问题在于my-video的位置是绝对的，这意味着它是基于my-video的自然定位和将按钮定位到任何地方的自然流程而来的，这很棘手，这不是我们想要的，因此您需要使my-video的位置相对，保持options-list位置为绝对，还要像这样添加top：0和left：0

.video-container {
    position: relative;

    my-video {
        position: relative;
        width: 100%;
        background-color: red;
    }

    .options-list {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.finish-button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 32px;
    position: relative;
}

由于my-video处于定位流程中，因此按钮可以转到屏幕底部

Answer 2

为stackblitz的按钮添加了以下CSS：

position: absolute;
top: 40%;
left: 50%;
right: 50%;

您需要在此处使用position: absolute才能获得按钮相对于.video-container div的位置。