html - 如何用 CSS 放置 3 个色 block HTML

Question

我希望我的背景是 3 个同样高的色 block (比如德国国旗)。我创建了一个带有页眉、主体和页脚的 HTML 文件。然后在下面添加 CSS。但这只会在页面顶部创建 3 个小块。我尝试用高度和最大高度替换最小高度。没有运气。我缺少一些基本的东西。什么？

* {
  margin: 0;
  padding: 0;
}
body    {
    height: 100%;
}
header  {
    background-color: black;
    min-height: 33%;
}
main    {
    background-color: red;
    min-height: 33%;
}
footer  {
    background-color: gold;
    min-height: 33%;
}

Answer 1

高度的 % 不起作用，因为正文没有定义高度。 HTML 不理解 - 100% 什么？

您应该在 vh 中定义主体高度(viewport height units，1 vh = 视口(viewport)高度的 1/100):

* {
  margin: 0;
  padding: 0;
}
body    {
    height: 100vh;
}
header  {
    background-color: black;
    min-height: 33%;
}
main    {
    background-color: red;
    min-height: 33%;
}
footer  {
    background-color: gold;
    min-height: 33%;
}

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