Question

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

标题应为70px
Main应该是屏幕的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>

Answer 1

你可以使用

width: calc(70% - 70px);

页脚上的

，请参阅此处的浏览器支持 http://caniuse.com/#feat=calc

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

1 个答案: