css - 实现简单布局的麻烦（2行，每行不同的颜色）

Question

我无法实现某个布局，其中页眉占据视口高度的 50% 和宽度的 100%，而页脚占据视口高度的 50% 和宽度的 100%。页眉应该是绿色的，页脚应该是白色的。

颜色有效，但高度无效。高度只适合每个元素的内容量。

知道为什么以及如何解决它吗？

另外，我知道高度加起来超过 100%。我也在尝试触发滚动条。

Answer 1

HTML：

<header></header>
<footer></footer>

CSS：

html, body {
    height: 100%;
}

header, footer {
    height: 50%;
    width: 100%;
}

header {
    background: green;
}

演示

诀窍是确保html和body元素设置为 100% 高度。