如果我不硬编码 <div> 里面的高度组件是隐藏的

Question

我喜欢根据其内容高度扩展div，但如果我使用height: '100%'，div 内部的孔Component 会被隐藏。有点复杂，希望多点眼睛！

我发了CodeSandbox

在 Chrome 中看起来像这样：

我可以在调试过程中看到“隐藏”Component 渲染正常，所以很奇怪它是“隐藏”

如果我将相同的Style 设置为height: 1000 则<ul> 有孩子：

但我希望它根据内容高度展开，因此height: 1000 将不起作用。

在这个CodeSandbox 中，我设置了height: 1000, 来演示发生了什么。拒绝扩大高度的Component是Masonry图库Component

style={{
    width,
    height: 1000,
    position: 'relative',
    margin: '0 auto',
}}

当您打开沙盒时，您会在左侧编辑器窗口中看到 TimeLineViewer.js 和 Style 代码问题。 TimeLineViewer.js 加载 Masonry 图片库 Component Masonry.js

我尝试将父级设置为 100% 高度，但没有运气。我对 JavaScript 和 HTML 有点陌生，所以建议会很好

Answer 1

要对此进行调试，请先取消或注释掉 LeComponent，然后在实现 100% 高度时测试您的 div 实际高度。

<div
    style={{
        width,
        height: !fullscreen && "100%",
        position: fullscreen ? 'initial' : 'relative',
        margin: '0 auto',
    }}
>
    {/* <LeComponent
        infinite
        items={items}
        itemRenderer={ItemRenderer}
        gutter={gutter}
        outerGutter={outerGutter}
        extraPx={0}
        debug={debug}
        rows={{
            0: 1,
            320: 2,
            480: 3,
            640: 4,
        }}
        cols={{
            0: 1,
            360: 2,
            640: 2,
            960: 3,
            1280: 4,
            1400: 5,
            1720: 6,
            2040: 7,
            2360: 8,
        }}
        onEnd={() => {
            // TODO possible when many items lazy load them
            // this.addItems();
        }}
    /> */}
</div>

您会注意到，它仍然不占用任何高度，并且您创建的组件对此没有任何影响。这是因为这是一个 CSS 问题。 The height percentage cannot be determined 因为没有具有高度定义的父级或祖先。你得到了无效的百分比。

之后，我们可以看一下您的Masonry 组件。仅通过查看方法标识符（例如_getDimensions、_setContainerHeight）并进一步查看代码库，我们可以了解到该组件实际上依赖于某些元素维度（很可能也是父维度div） - 根据我们前段时间从 CSS 问题中了解到的情况，父级 div 实际上的 height 为 0。

此时，我取出了 Masonry 组件上的 style 道具，这样它就不会依赖于父尺寸并解决了问题

<div ref={this.container}>
    <ul ref={this.list}>
        {mounted && items.map((item, index) => this.renderItem({ index, item, maxIndex }))}
    </ul>
</div>