Question

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

仅供参考...我正在为大学和移动设备设计项目，因此该格式不会扩展到台式机，因为我将更改台式机和平板电脑的样式

Answer 1

使用 CSS3 ，您可以毫无问题地使用 calc() ：

height: calc(100% - 88px);
height: -o-calc(100% - 88px); /* Opera */
height: -moz-calc(100% - 88px); /* Firefox */
height: -webkit-calc(100% - 88px); /* Chrome */

Answer 2

如果您没有时间学习JavaScript，最简单的方法是将标头设置为固定的高度。比您可以从横幅中减去固定高度。这不是最漂亮的解决方案，但它可以起作用：

header {
  height: 80px
}

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

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

2 个答案: