html - 如何计算 <body> 标签中标题的高度？

<分区>

如何计算 <header> 的高度来自 <main> 的标签标记，以便我可以使用 calc()函数来计算可用于在其位置上横跨横幅的剩余屏幕空间。

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;
}

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

最佳答案

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

header {
  height: 80px
}

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

关于html - 如何计算 <body> 标签中标题的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57027775/

上一篇：css - 如何使外边距成为列网格中装订线大小的两倍？

下一篇：javascript - 如何使此 slider 代码适用于同一页面上的多个 slider

相关文章：

Javascript 元素相对于屏幕的位置

html - 为什么有时父元素的高度为 0px？

django - 如何将存储库中的特定 django 文件夹部署到 azure 应用程序服务？

node.js - 如何在 Ubuntu 服务器中部署基于 Node JS 的 API 进行生产

html - 如何使网站适合 Windows Phone 视口(viewport)

java - 使用 tagsoup 构建 DOM 文档

javascript - jQuery Mobile 页面覆盖桌面 HTML div 布局

html - 页脚下方的额外空间

html - 在 IE8 中修复元素的 z-index

css - 将我的标题内容推向右侧的幻影力量是什么？