设置三行布局的正确高度尺寸答案

【问题标题】：Set the correct height dimension of a three-row-layout设置三行布局的正确高度尺寸
【发布时间】：2015-05-07 06:57:37
【问题描述】：

如何创建具有以下高度的三行：

标题应为 70px
主屏幕应占屏幕的 30%
页脚应该占据其余空间

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
header {
  background-color: red;
  height: 70px;
  z-index: 10;
  position: relative;
}
main {
  background-color: green;
  height: 30%;
  position: relative;
}
footer {
  background-color: #ddd;
  /* height? */
}

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

【问题讨论】：

这看起来像是这个问题的重复：stackoverflow.com/questions/7202427/…
@resolute_coder – 这个问题已经过时了。我会说这需要一个新的答案。

标签： html css

【解决方案1】：

你可以使用

width: calc(70% - 70px);

在页脚，请在此处查看浏览器支持 http://caniuse.com/#feat=calc

【讨论】：