AI 摘要：本文深入探讨了CSS中高度设置的问题，揭示了为什么百分比高度有时不起作用，并提供了解决这些问题的有效方法。文章详细解释了CSS中宽度和高度计算的本质差异，并介绍了使用Flexbox和Grid布局来解决高度设置难题的策略。

• 引言：作者分享了自己学习CSS初期对高度设置问题的困惑，并指出理解背后的机制是解决问题的关键。

• 循环计算
• 解释了 CSS 中宽度和高度计算的根本区别：宽度基于父元素计算，而高度基于子元素。
• 描述了当子元素尝试设置百分比高度时，父子元素之间形成循环计算的问题，导致浏览器忽略百分比高度声明。

• 可知的高度
• 介绍了通过为父元素设置明确高度（如px或rem单位）来打破循环计算的方法。
• 展示了如何使用 rem 单位替代 px 单位，以提升布局的可访问性。
• 讨论了如何在嵌套元素中使用百分比高度，只要它们基于一个明确的尺寸。

• 从顶到底的百分比
• 探讨了在顶级 html 元素上设置百分比高度的效果，并解释了 html 元素的特殊性。
• 提到过去使用百分比高度确保布局填充整个视口的方法，以及现在使用 svh 单位的替代方案。

• 最终挑战
• 分析了使用固定高度（如 24rem ）可能导致内容溢出的问题。
• 展示了使用 min-height 替代 height 的尝试，但指出这仍然不能解决百分比高度的问题，因为 min-height 并不提供固定尺寸。

• 解决方案
• 介绍了使用 Flexbox 和Grid布局来解决高度设置问题的方法。
• 解释了如何通过设置 display: grid 或 display: flex 来创建新的格式化上下文，使子元素自动填充父容器。
• 提供了使用 Flexbox 和 Grid 的具体代码示例，并解释了它们的布局机制。

Joshwcomeau

The Height Enigma • Josh W. Comeau

One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting “height: 100%” would have no effect at all. When I finally figured out what was going on…