实现简单布局的麻烦（每行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;
}

Demo

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