html - CSS:如何在页眉和页脚之间放置内容

Question

我想做一个包含3个部分的页面:

• 页眉(页面顶部)
• 页脚(页面底部)
• 内容 - 在页眉和页脚之间没有滚动条(是传单 map )。内容从页眉末尾开始，到页脚开头结束。

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

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

我的问题是，如果我调整以像素为单位的内容高度，则无法在每个屏幕上正常工作，仅在我的屏幕上有效。

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(视口(viewport)高度，类似于百分比)减去 60px(页眉 30px，页脚 30)，然后它的位置就在页眉下方。

我希望这对你有用。