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

Question

我喜欢div根据其内容高度展开，但是如果我像height: '100%'那样使用div里面的洞Component是隐藏的。有点复杂，希望多一些眼睛！

在 Chrome 中看起来像这样：

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

如果我将 Style 设置为 height: 1000，则 <ul> 有 Children:

但我希望它根据其内容高度展开，所以 height: 1000 不起作用。

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

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

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

我尝试过将 parent 也设置为 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 因为没有 parent 或具有高度定义的祖先。你得到的是 void 的百分比。

之后，我们可以看一下您的 Masonry 组件。仅通过查看方法标识符（例如 _getDimensions、_setContainerHeight）并进一步查看代码库，我们可以了解到该组件实际上依赖于某些元素维度（很可能是 parent div 维度） - 从我们刚才从 CSS 问题中学到的知识，parent div 实际上有一个 height 为 0.

在这一点上，我取出了您的 Masonry 组件上的 style 道具，这样它就不会依赖于 parent 尺寸并解决了问题

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

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

If i don't hardcode <div> height component inside is hidden

expand

styles

reactjs