几乎相同的 React 代码的不同 html 主体高度答案

【问题标题】：Different html body height for virtually same React code几乎相同的 React 代码的不同 html 主体高度
【发布时间】：2023-02-04 01:17:03
【问题描述】：

我试图通过将代码复制到 Codesandbox 来复制 react-resizable-panels 示例组件的用法。但是在codesandbox中，内容并没有占据整个viewport的高度。据我所知，风格绝对没有区别。 body 高度为 100%。它似乎仅在 react-resizable-panels 示例中将其扩展到全高。

下面是两个相同的代码示例，供参考：

原文摘录：https://react-resizable-panels.surge.sh
Codesandbox 克隆：https://y6yhjv.csb.app

任何帮助调试两个示例之间的差异的帮助将不胜感激。谢谢。 :)

【问题讨论】：

有趣的是，我也很惊讶为什么第一个例子会达到全高。我能发现的唯一区别是第一个示例不在 HTML5 标准中，因为它缺少 <!DOCTYPE html> 标记，不确定问题是否与 Quirks mode 相关。

标签： html css reactjs

【解决方案1】：

看起来丢失的 <!Doctype html> 使 react-resizable-panels 示例恢复到“怪癖”模式并导致 html 和 body 占据页面高度的 100%。刚刚用快速代码进行了测试，结果如下。

彻底查看两者的结构及其各自的计算高度。

【讨论】：

【解决方案2】：

height: 100% 需要一个父元素来引用高度。我实际上更惊讶的是第一个例子达到了全高。

无论哪种方式，将 height: 100vh; 添加到您的 <div id="root"> 元素（即父元素）将为您提供全高。或者，您可以将它添加到当前设置为 height: 100% 的元素。

【讨论】：

是的，这确实可以解决问题，我也对第一个例子感到惊讶，但我的这篇文章更多是关于理解这两个看似相似的应用程序与 css 之间的区别