html - 如何使截面具有相等的高度？

Question

这是我的代码的最小工作示例：https ://codepen.io/SamHuguet/pen/xxZqNxK

• 我注意到 2 个部分（每个部分包含一个h1元素）具有不同的高度。

• 我希望每个部分都有相同的高度（顶部应该延伸到页面顶部）。看起来它在h1元素上方被切断了。

• 问题1：为什么顶部相对于下部的高度较小？

我可以用...

display: flex;
flex-direction: column;

...在main 元素内解决这个问题。这是一个最小的工作示例来证明这一点：https ://codepen.io/SamHuguet/pen/BajWEEZ

• 问题2：为什么这两行代码解决了高度的差异？

请直接参考每个问题来构建答案。

标签： htmlcss