时间戳

首页 > 解决方案 > 如何计算标签中标题的高度？

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

问题描述

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

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

标签： htmlcssweb-deployment

解决方案

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

header {
  height: 80px
}

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

推荐阅读