为什么父母和孩子的div有相同的高度[重复]答案

【问题标题】：Why parent and children divs have the same height [duplicate]为什么父母和孩子的div有相同的高度[重复]
【发布时间】：2020-09-26 20:20:26
【问题描述】：

我创建了一个空的 react 项目，我只为样式添加了一个 materializecss。

<div className="App">
    <header>
        <nav/>
    </header>

    <div className="row category__list" />

    <footer className="page-footer">
        <div className="footer-copyright" />
    </footer>
</div>

我为我的积木添加了样式。

.App {
  height: 100vh;
}

.category__list {
  margin: 0;
  height: 100%;
}

.page-footer {
    padding: 0;
}

为什么我的区块App 和区块category__list 的高度相同？而且我有一个卷轴，如果不使用卷轴，我的页脚就看不到。

在我看来，category__list 块应该设置所有可用空间，并且我的页脚不能超出显示范围。

例如 http://jsfiddle.net/MegaRoks/g4ruz53p/10/

【问题讨论】：

height in % 定义了父块的高度百分比。您将子 div 的高度定义为 100%，这意味着它将与父 div 的高度相同。要创建 div 来填充可用空间，请参考此链接：*.com/questions/10228280/…

标签： html css

【解决方案1】：

那是因为你给你的.App 一个全屏高度 (100vh) 并让你的category__list 再次达到 100% 的高度。所以你的页脚位于它的下方。这就是你得到卷轴的原因。

如果您需要您的应用全屏高度，那么也许这会对您有所帮助。

    .App {
      height: 100vh;
    }

    .category__list {
      margin: 0;
      height: calc(100% - 150px); /* footer height reduced from full height*/
    }

    .page-footer {
        padding: 0;
        height: 150px;
    }

【讨论】：