css - 无法在反应 css 中设置 100% 高度

Question

我正在做一个打印多个“元素”的反应应用程序，就像它是某种日历一样。但我试图设置背景颜色，以便覆盖所有立方体后面的背景，但似乎不可能做到。

我基本上有这个

Calendario.jsx

 render() {
        return (
            <div className="container">
                <CalendarGrid weeks={this.getLivedWeeks()}/>
            </div>
        )
    }

CalendarGrid.jsx

    render() {
    let rows = []
    for (let i = 0; i<this.props.weeks;i++){
      rows.push(<CalendarFields key={i} />)
    }
    return <h1>{rows}</h1>

  }

然后在 calendario.css

我已经应用了这个

.container{
    background-color:yellow;
    height:100%;
}

但它不会显示任何东西。同时，如果我把

 .container{
        background-color:yellow;
        height:100vh;
    }

它就像我想要的那样工作，但它只覆盖 100vh ，但我的屏幕恰好需要超过 100vh 因为我必须向下滚动，所以这不是解决方案。

我不明白为什么 height: 100% won't work there

这就是 100vh 的外观

标签： cssreactjs

Answer 1

现在在您的示例中， div 仅包含浮动元素。这使它折叠到 0px 的高度。相邻的日历网格将出现在浮动 div 的左侧/右侧，因为它们被视为普通浮动元素。

现在声明溢出会建立一个新的块格式化上下文，这使得 div 包含它的子元素。突然 div “重新出现”，不再有大小 0px。日历网格被推到底部。