CSS：如何在页眉和页脚之间放置内容

Question

我想要一个包含 3个部分：

的页面

• 标题（页面顶部）
• 页脚（页面底部）
• 内容 - 页眉和页脚之间没有滚动条（是传单地图）。内容在标题的末尾开始，在页脚开头结束。

此时我有position:fixed页眉和页脚。

我需要在内容中添加哪些CSS规则才能在这两个部分之间进行调整？

我的问题是，如果我调整内容高度（以像素为单位）在每个屏幕中都不起作用，只在我的屏幕上。

header,
footer {
  position: fixed;
  height: 30px;
  width: 100%;
}
header {
  background-color: red;
  top: 0;
}
footer {
  background-color: blue;
  bottom: 0;
}
section {
  background-color: black;
  margin-top: 30px;
  overflow: hidden;
  height: 300px; /*But this is not working in all screens! */
  width: 100%;
}

<header></header>
<section></section>
<footer></footer>

非常感谢你！

Answer 1

所以在这个例子中，我使用30px作为页眉，30px作为页脚。 使用此代码：

section {
   height: calc(100vh - 60px);
   top: 30px;
}

计算100vw（视口高度，类似于百分比）减去60px（标题为30px，页脚为30），然后它位于标题下方。

我希望这适合你。