如何计算<body>标签中header的高度？

Question

如何从 <main> 标签计算 <header> 标签的高度，以便我可以使用 calc() 函数计算屏幕的其余部分 space 可用于在其位置跨越横幅。

HTML:

<body>
  <header>
    <!-- A Navigation Bar of some sorts -->
  </header>
  <main>
    <div class="banner">
      <!-- Some text on the banner -->
    </div>
  </main>
</body>

和CSS：

.banner {
  height: calc(100vh - /* Height of <header> */);
  background-image: url(some image);
  background-position: center;
  background-size: cover;
}

仅供参考...我正在为一个专为大学和移动设备设计的项目，因此这种格式不会跨越桌面，因为我将更改桌面和平板电脑的样式

Answer 1

如果您没有时间学习 JavaScript，最简单的方法就是为页眉指定一个固定高度。比你可以从横幅中减去固定高度。这不是最漂亮的解决方案，但它有效：

header {
  height: 80px
}

.banner {
  height: calc(100vh - 80px);
  background-image: url(some image);
  background-position: center;
  background-size: cover;
}```

如何计算<body>标签中header的高度？

How to calculate the height of a header in <body> tag?

html

css

web-deployment