如何为HTML中的不同div分配固定百分比高度？

假设我有一个title div、content div和footer div

<div id="header">
   Title
</div>
<div id="content" style="background:red">
       <p>TEST</p>
</div>
<div id="footer">
   footer
</div>

标题
试验

页脚

如何始终将标题div设置为20%，内容div设置为70%，页脚div设置为10%

---

谢谢

您可以通过绝对定位来完成：

#header {
  position: absolute;
  top: 0;
  height: 20%;
  left: 0;
  width: 100%;
}

#content {
  position: absolute;
  top: 20%;
  height: 70%;
  left: 0;
  width: 100%; 
}

#footer {
  position: absolute;
  top: 90%;
  height: 10%;
  left: 0;
  width: 100%;
}

---

请参阅以了解它的实际操作。

您可以使用绝对定位：

#header {
  position: absolute;
  top: 0;
  height: 20%;
  left: 0;
  width: 100%;
}

#content {
  position: absolute;
  top: 20%;
  height: 70%;
  left: 0;
  width: 100%; 
}

#footer {
  position: absolute;
  top: 90%;
  height: 10%;
  left: 0;
  width: 100%;
}

请参阅以了解它的实际作用。

HTML:

HTML:

试试这个：

试试这个：

---

你说的是宽度，但你的元素是堆叠的。你是说高度吗？你说的是宽度，但你的元素是堆叠的。你是说身高吗？

* {
  margin: 0;
  padding: 0;
}

html,
body,
.container {
   height: 100%;
}

#header {
   height: 20%;
}

#content {
   height: 70%;
}

#footer {
   height: 10%;
}

#header {
    position: absolute;
    height: 20%;
    width: 100%;
    top: 0;
    background-color: blue;
}
#content {
    position: absolute;
    top: 20%;
    height: 70%;
    width: 100%;
    background-color: red;
}
#footer {
    bottom: 0;
    position: absolute;
    height: 10%;
    width: 100%;
    background-color: green;
}