容器 div 不适应子 Angular 组件高度答案

【问题标题】：Container div doesn't adjust to child Angular component height容器 div 不适应子 Angular 组件高度
【发布时间】：2019-01-30 15:37:08
【问题描述】：

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

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

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

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

我尝试了不同的定位配置（位置relative、absolute、static 等）但没有任何效果。实现此目的的正确方法是什么？

【问题讨论】：

我无法访问图片，您能解释一下您想要什么吗？列表应该与视频重叠，视频应该与按钮重叠，但它们应该保持它们在你的 stackblitz 中的位置？
列表应与视频重叠，按钮应显示在视频下方。 Stackblitz 是我目前所获得的，但这不是我想要的。
所以按钮会被隐藏？并且列表应该占据视频的所有宽度？
它没有高度，因为除了使用静态之外的一些 CSS 定位（在你的情况下是绝对的）。
这样的？ stackblitz.com/edit/ionic-a9i5ro?file=pages/home/home.scss

标签： html css angular ionic-framework ionic3

【解决方案1】：

为您的按钮更新了stackblitz，并使用了以下css：

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

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

【讨论】：

如果我保持相同的窗口大小或相同的视频大小，您的解决方案将有效。但是，如果其中任何一个发生变化，按钮就会失去所需的位置。

【解决方案2】：

我认为问题在于my-video是绝对定位的，也就是说它是从自然流中取出来的要使my-video 的定位相对，保持选项列表位置绝对，但还要添加 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处于定位流中

【讨论】：