Html 当我们将容器的高度设置为100vh以适应屏幕高度，但上面有另一个组件时，如何避免滚动？

考虑以下代码-

<div class="header">
  <span>Heading element</span>
</div>
<div class="mainContainer">
  <span>Main content</span>
</div>

.header
{
  height:50px;
  border:1px solid black;
}
.mainContainer
{
  height:70vh;
  border:1px solid black;
}

标题元素
主要内容
.标题
{
高度：50px；
边框：1px纯黑；
}
.主集装箱
{
高度：70vh；
边框：1px纯黑；
}

---

我想让mainContainer占据整个屏幕的高度。但在它上面还有另一个div，它自己的高度是50像素。现在，如果我将100vh的高度指定给mainContainer，那么屏幕上会出现滚动条，这很明显，但如何避免它？

将

位置：绝对
与
顶部：0
添加到标题类：


正文{
保证金：0；
}
.标题
{
高度：50px；
边框：1px纯黑；
位置：绝对位置；
排名：0；
}
.主集装箱
{
高度：100vh；
边框：1px纯黑；
位置：相对位置；
}

标题元素
主要内容